/* ========= GratoWin — MAIN CSS (one file) ========= */

/* Reset */
* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  font-family: "Figtree", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  color: rgba(255,255,255,.92);
  background:
    radial-gradient(1200px 500px at 70% 20%, rgba(255,120,60,.22), transparent 60%),
    radial-gradient(900px 450px at 35% 55%, rgba(140,80,255,.18), transparent 60%),
    radial-gradient(900px 500px at 20% 10%, rgba(0,220,255,.10), transparent 60%),
    linear-gradient(180deg, #060713 0%, #0b0c1a 55%, #080916 100%);
  overflow-x: hidden;
}
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
ul, ol { margin: 0; padding-left: 18px; }
p { margin: 0; }
button { font-family: inherit; }

/* Layout helpers */
.container{
  width: 100%;
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 18px;
}
.wrap{
  padding-top: 76px;
  min-height: 100vh;
}

/* Header */
header{
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 1000;
  background: rgba(7, 8, 20, .75);
  border-bottom: 1px solid rgba(255,255,255,.08);
  backdrop-filter: blur(10px);
}
.header{
  height: 76px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}
.header__left{
  display: flex;
  align-items: center;
  gap: 14px;
  min-width: 0;
}
.burger, .header__icon{
  width: 40px; height: 40px;
  display: grid;
  place-items: center;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.04);
}
.icon{ fill: currentColor; color: rgba(255,255,255,.85); }

.header__logo img{
  height: 34px;
  width: auto;
  display: block;
  filter: drop-shadow(0 6px 10px rgba(0,0,0,.35));
}

.header__nav ul{
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  align-items: center;
  gap: 12px;
  white-space: nowrap;
}
.header__nav a{
  display: inline-flex;
  align-items: center;
  height: 38px;
  padding: 0 12px;
  border-radius: 12px;
  color: rgba(255,255,255,.80);
  border: 1px solid transparent;
}
.header__nav a:hover{
  background: rgba(255,255,255,.05);
  border-color: rgba(255,255,255,.10);
}
.header__nav a.active{
  background: linear-gradient(90deg, rgba(255,162,70,.22), rgba(255,80,120,.18));
  border-color: rgba(255,255,255,.10);
  color: rgba(255,255,255,.92);
}

.header__right{
  display: flex;
  align-items: center;
  gap: 10px;
}
.header__search{
  display: inline-flex;
  align-items: center;
  gap: 10px;
  height: 40px;
  padding: 0 14px;
  border-radius: 14px;
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.10);
  color: rgba(255,255,255,.78);
}
.header__btn{
  height: 40px;
  padding: 0 14px;
  border-radius: 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.05);
  color: rgba(255,255,255,.86);
}
.header__btn:last-child{
  background: linear-gradient(90deg, #ff9b2f, #ff4d7a);
  border-color: rgba(255,255,255,.10);
  color: #0a0b16;
  font-weight: 700;
}

/* Sidebar */
.sidebar{
  position: fixed;
  top: 76px;
  left: 0;
  bottom: 0;
  width: 260px;
  padding: 14px;
  background: rgba(7, 8, 20, .60);
  border-right: 1px solid rgba(255,255,255,.08);
  backdrop-filter: blur(10px);
  z-index: 900;
  overflow-y: auto;
}
.sidebar__menu{ padding-bottom: 16px; }
.sidebar__list{
  list-style: none;
  padding: 0;
  margin: 0;
}
.sidebar__list li a{
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border-radius: 14px;
  color: rgba(255,255,255,.80);
}
.sidebar__list li a:hover{
  background: rgba(255,255,255,.05);
}
.sidebar__list li a.active{
  background: linear-gradient(90deg, rgba(255,162,70,.18), rgba(255,80,120,.14));
  border: 1px solid rgba(255,255,255,.08);
}
.sidebar__list img{
  width: 22px;
  height: 22px;
  border-radius: 6px;
}
.sidebar__line{
  height: 1px;
  margin: 12px 0;
  background: rgba(255,255,255,.08);
}
.sidebar__footer{
  position: sticky;
  bottom: 0;
  background: rgba(7, 8, 20, .65);
  padding-top: 10px;
}
.sidebar__footer a{
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  height: 40px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.04);
  margin-top: 10px;
  color: rgba(255,255,255,.80);
}

/* Main offset due sidebar */
.main{
  margin-left: 260px;
}

/* Mobile menu */
.mobile--menu{
  display: none;
}

/* ===== HERO / BANNER (FIX: no white top) ===== */
.banner--wrap{ padding: 22px 0 10px; }
.banner{
  position: relative;
  display: block;
  border-radius: 26px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.08);
  background: rgba(255,255,255,.04);
  box-shadow: 0 20px 60px rgba(0,0,0,.35);
  min-height: 360px;
}

/* Make image cover FULL banner area */
.banner__img{
  position: absolute;
  inset: 0;
}
.banner__img img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

/* Content overlay */
.banner__content{
  position: absolute;
  left: 22px;
  bottom: 22px;
  max-width: 420px;
  padding: 16px 16px 14px;
  border-radius: 18px;
  background: rgba(0,0,0,.38);
  border: 1px solid rgba(255,255,255,.10);
  backdrop-filter: blur(10px);
}
.banner__content p:nth-child(1){
  font-size: 13px;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: rgba(255,255,255,.85);
  margin-bottom: 8px;
}
.banner__content p:nth-child(2){
  font-size: 22px;
  font-weight: 800;
  line-height: 1.15;
  margin-bottom: 12px;
}
.banner__content p:nth-child(3) span{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 40px;
  padding: 0 14px;
  border-radius: 14px;
  background: linear-gradient(90deg, #ff9b2f, #ff4d7a);
  color: #0a0b16;
  font-weight: 800;
}

/* dots/arrows – optional */
.dots, .arrows{ display: none; }

/* ===== TOP MENU ===== */
.top--menu{ padding: 12px 0 6px; }
.top__menu__row ul{
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  gap: 10px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;

  /* hide scrollbar */
  scrollbar-width: none;
}
.top__menu__row ul::-webkit-scrollbar{ height: 0; }
.top__menu__row a{
  display: inline-flex;
  align-items: center;
  gap: 10px;
  height: 44px;
  padding: 0 14px;
  border-radius: 16px;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.09);
  color: rgba(255,255,255,.82);
  white-space: nowrap;
}
.top__menu__row a:hover{
  background: rgba(255,255,255,.06);
}
.top__menu__row a img{
  width: 22px; height: 22px;
  border-radius: 8px;
}

/* ===== CARDS / “SLOT SHELVES” (FIX: remove visible scrollbar) ===== */
.cards--wrap{ padding: 14px 0 10px; }

.cards__row{
  margin-top: 18px;
  padding: 18px 18px 12px;
  border-radius: 22px;
  background: rgba(255,255,255,.03);
  border: 1px solid rgba(255,255,255,.08);
}

.cards__top{
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 14px;
}
.cards__title span{
  font-weight: 800;
  font-size: 18px;
}
.cards__line{
  flex: 1;
  height: 1px;
  background: rgba(255,255,255,.10);
}
.cards__nav{
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 16px;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.10);
  color: rgba(255,255,255,.80);
}
.cards__arrows{ display: none; }

/* The shelf itself */
.cards__list{
  display: flex;
  gap: 16px;
  overflow-x: auto;
  overflow-y: hidden;
  padding-bottom: 2px; /* keep layout stable */

  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;

  /* hide scrollbars everywhere */
  scrollbar-width: none;
}
.cards__list::-webkit-scrollbar{ height: 0; }
.cards__item{
  flex: 0 0 210px;
  scroll-snap-align: start;
}
.cards__item__body{
  position: relative;
  border-radius: 20px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.05);
  aspect-ratio: 16 / 10;
  box-shadow: 0 14px 28px rgba(0,0,0,.30);
}
.cards__item__body img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}
.cards__item__body span{
  position: absolute;
  left: 10px;
  top: 10px;
  width: 26px;
  height: 26px;
  border-radius: 10px;
  display: grid;
  place-items: center;
  font-weight: 800;
  background: rgba(0,0,0,.35);
  border: 1px solid rgba(255,255,255,.12);
}
.cards__item__title{
  margin-top: 10px;
  font-weight: 700;
  color: rgba(255,255,255,.88);
  text-align: left;
}
.cards__item:hover .cards__item__body{
  transform: translateY(-2px);
  transition: transform .15s ease;
}

/* ===== CONTENT ===== */
.content--wrap{ padding: 18px 0 26px; }
.content{
  padding: 18px;
  border-radius: 22px;
  background: rgba(255,255,255,.03);
  border: 1px solid rgba(255,255,255,.08);
}
.content__item + .content__item{ margin-top: 18px; }
.content__item h1{
  margin: 0 0 10px;
  font-size: 28px;
  letter-spacing: -0.02em;
}
.content__item h2{
  margin: 0 0 10px;
  font-size: 22px;
}
.content__item h3{
  margin: 14px 0 8px;
  font-size: 18px;
}
.content__item p, .content__item li{
  line-height: 1.65;
  color: rgba(255,255,255,.88);
}
.content__item p + p{ margin-top: 10px; }
.content a{ text-decoration: underline; text-underline-offset: 3px; }

.table--style{
  margin-top: 12px;
  overflow-x: auto;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.03);
  scrollbar-width: none;
}
.table--style::-webkit-scrollbar{ height: 0; }
.table--style table{
  width: 100%;
  min-width: 720px;
  border-collapse: collapse;
}
.table--style td, .table--style th{
  padding: 10px 12px;
  border-bottom: 1px solid rgba(255,255,255,.08);
  color: rgba(255,255,255,.86);
}
.content__item.faq .faq__item{
  margin-top: 12px;
  padding: 14px 16px;
  border-radius: 16px;
  background: rgba(255,255,255,.03);
  border: 1px solid rgba(255,255,255,.08);
}

/* ===== FOOTER ===== */
footer{
  padding: 22px 0 40px;
  border-top: 1px solid rgba(255,255,255,.08);
  background: rgba(7, 8, 20, .45);
}
.footer__menu{
  display: grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: 16px;
  padding: 10px 0 16px;
}
.footer__menu__title{
  margin: 0 0 10px;
  font-weight: 800;
  color: rgba(255,255,255,.88);
}
.footer__menu ul{
  list-style: none;
  padding: 0;
  margin: 0;
}
.footer__menu li{
  margin: 6px 0;
  color: rgba(255,255,255,.74);
}
.footer__menu a{
  color: rgba(255,255,255,.74);
}
.footer__menu a:hover{
  color: rgba(255,255,255,.92);
}
.footer__copyright{
  color: rgba(255,255,255,.65);
  font-size: 13px;
  line-height: 1.6;
}

/* Cookie banner */
.cookie-banner{
  position: fixed;
  left: 14px;
  right: 14px;
  bottom: 14px;
  z-index: 2000;
  border-radius: 18px;
  background: rgba(0,0,0,.55);
  border: 1px solid rgba(255,255,255,.12);
  backdrop-filter: blur(10px);
}
.cookie-container{
  padding: 14px;
  display: flex;
  gap: 14px;
  align-items: center;
  justify-content: space-between;
}
.cookie-content h3{
  margin: 0 0 4px;
  font-size: 14px;
}
.cookie-content p{
  margin: 0;
  font-size: 13px;
  color: rgba(255,255,255,.75);
}
.cookie-buttons{
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}
.cookie-btn{
  height: 38px;
  padding: 0 14px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.05);
  color: rgba(255,255,255,.86);
  cursor: pointer;
}
.cookie-btn-accept{
  background: linear-gradient(90deg, #ff9b2f, #ff4d7a);
  color: #0a0b16;
  font-weight: 800;
}

/* ===== Responsive ===== */
@media (max-width: 1100px){
  .header__nav{ display: none; }
}
@media (max-width: 980px){
  .sidebar{ transform: translateX(-110%); }
  .main{ margin-left: 0; }
  .mobile--menu{
    display: flex;
    gap: 10px;
    padding: 10px 14px;
    position: sticky;
    top: 76px;
    z-index: 800;
    background: rgba(7, 8, 20, .70);
    border-bottom: 1px solid rgba(255,255,255,.08);
    backdrop-filter: blur(10px);
    overflow-x: auto;
    scrollbar-width: none;
  }
  .mobile--menu::-webkit-scrollbar{ height: 0; }
  .mobile--menu a{
    height: 38px;
    padding: 0 12px;
    border-radius: 14px;
    border: 1px solid rgba(255,255,255,.10);
    background: rgba(255,255,255,.04);
    display: inline-flex;
    align-items: center;
    white-space: nowrap;
    color: rgba(255,255,255,.82);
  }

  .banner{ min-height: 300px; }
  .banner__content{ left: 14px; right: 14px; max-width: none; }
  .footer__menu{ grid-template-columns: 1fr; }
}