:root{
  --bg:#0b0b0b;
  --panel:#111;
  --muted:#e6e6e6;
  --accent:#ff2d6f;
  --link:#4db8ff;
  --card:#161616;
  --card-border:#222;
  --radius:12px;
  --maxwidth:1300px;
.mega-dropdown 
{
    padding-bottom: 8px;
    /* збільшуємо активну зону */
  }

  .mega-panel {
    margin-top: -8px;
    /* підтягуємо меню впритул до кнопки */
  }
}

*{box-sizing:border-box}

body{
  margin:0;
  font-family:Inter, system-ui, -apple-system, "Segoe UI", Roboto, Arial;
  background:var(--bg);
  color:var(--muted);
  overflow-x:hidden;
  animation:fadeIn .4s ease-out;
}

@keyframes fadeIn{
  from{opacity:0; transform:translateY(6px);}
  to{opacity:1; transform:translateY(0);}
}

/* A2: lighter breathing glow (smaller + softer) */
body::before,
body::after{
  content:"";
  position:fixed;
  width:420px;
  height:420px;
  filter:blur(140px);
  opacity:0.22;
  z-index:-1;
  animation:breathe 20s infinite ease-in-out;
  will-change:transform,opacity;
}
body::before{background:#ff2d6f; top:-140px; left:-140px;}
body::after{background:#4db8ff; bottom:-140px; right:-140px; animation-delay:4s;}

@keyframes breathe{
  0%{transform:scale(1); opacity:.22;}
  50%{transform:scale(1.06); opacity:.30;}
  100%{transform:scale(1); opacity:.22;}
}

/* layout */
.wrap{
  max-width:var(--maxwidth);
  margin:6px auto;
  padding:0 16px;
}

/* HEADER */
header.topbar{
  position:sticky;
  top:8px;
  z-index:200;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:8px 14px;
  background:rgba(10,10,10,0.82);
  border-radius:14px;
  border:1px solid rgba(255,255,255,0.08);
  backdrop-filter:blur(18px);
}

.brand{display:flex; align-items:center; gap:10px;}
.logo{
  width:50px;
  height:50px;
  border-radius:12px;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:0;
}
.logo svg{display:block;}

.brand-text h1{margin:0;font-size:18px;}
.brand-text p{margin:0;font-size:12px;color:#bdbdbd;}

.header-right{
  display:flex;
  align-items:center;
  gap:10px;
}

/* search */
.search{
  display:flex;align-items:center;
  background:var(--panel);
  border:1px solid var(--card-border);
  padding:4px;border-radius:8px;
}
.search input{
  background:transparent;border:0;color:var(--muted);
  padding:6px 10px;min-width:200px;font-size:14px;
}

/* FILTERS */
.filters{display:flex;gap:8px;margin-top:10px;flex-wrap:wrap;}
.filter-btn{
  padding:7px 12px;border-radius:10px;
  background:var(--panel);border:1px solid var(--card-border);
  cursor:pointer;font-size:13px;color:var(--muted);transition:.25s;
}
.filter-btn.active{
  background:linear-gradient(135deg,var(--accent),var(--link));
  color:#fff;border-color:transparent;
  box-shadow:0 0 10px rgba(255,45,111,0.45);
  transform:translateY(-2px);
}

/* HERO */
.hero{
  background:linear-gradient(180deg,rgba(77,184,255,0.03),transparent);
  border-radius:10px;padding:14px;margin-top:6px;
}
.hero h2{margin:0 0 4px;font-size:20px;}
.hero p{margin:0;font-size:13px;color:#ccc;}

/* GRID */
.grid{
  display: grid;
  gap: 20px;
  margin-top: 8px;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
}
@media(max-width:1200px){.grid{
  display: grid;
  gap: 20px;
  margin-top: 8px;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
}}
@media(max-width:900px){.grid{
  display: grid;
  gap: 20px;
  margin-top: 8px;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
}}
@media(max-width:600px){.grid{
  display: grid;
  gap: 20px;
  margin-top: 8px;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
}}

/* CARD */
.card{
  background:var(--card);
  border-radius:14px;padding:10px;
  border:1px solid var(--card-border);
  display:flex;flex-direction:column;gap:8px;
  opacity:0; transform:translateY(12px);
  transition:.35s;
}
.card.show{
  opacity:1; transform:translateY(0);
}
.card:hover{
  transform:translateY(-12px)!important;
  border-color:transparent!important;
  background:
    linear-gradient(var(--card),var(--card)) padding-box,
    linear-gradient(135deg,var(--accent),var(--link)) border-box;
  box-shadow:
    0 16px 32px rgba(255,45,111,0.35),
    0 10px 24px rgba(0,0,0,0.45);
}

/* CARD HEADER (назва зверху, glass-фон, логотип) */
.card-head {
  padding: 6px 8px;
  gap: 8px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin-bottom:8px;
  border-radius:12px;
  background:linear-gradient(135deg,rgba(10,10,10,0.80),rgba(40,40,40,0.75));
  border:1px solid rgba(255,255,255,0.10);
  box-shadow:0 10px 24px rgba(0,0,0,0.55);
  backdrop-filter:blur(18px);
}

.card-head-main{
  display:flex;
  align-items:center;
  gap:10px;
  min-width:0;
}

.site-logo {
  width: 90px;
  height: 30px;
  border-radius: 6px;
  overflow: hidden;
  background: transparent;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  border: 1px solid #444;
}

.site-logo img{
  width:100%;
  height:100%;
  object-fit:cover;
  border-radius:50%;
}

/* текст у хедері картки */
.head-text{
  display:flex;
  flex-direction:column;
  gap:2px;
  min-width:0;
}
.head-text .title{
  margin:0;
  font-size:20px;font-weight:900;letter-spacing:0.3px;           /* великий шрифт */
  font-weight:800;
  letter-spacing:0.02em;
  color:#ffffff;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.head-text .desc{
  margin:0;
  font-size:11px;
  color:#d0d0d0;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

.badge{
  font-size:11px;
  padding:6px 8px;
  border-radius:999px;
  background:rgba(255,255,255,0.06);
  border:1px solid rgba(255,255,255,0.18);
  text-transform:uppercase;
}

/* THUMB */
.thumb{
  height:165px;border-radius:10px;overflow:hidden;
  cursor:pointer;background:#0f0f0f;
  display:flex;align-items:center;justify-content:center;
}

/* lazy blur → sharp + fade */
.thumb img,
.m-thumb img{
  width:100%;
  height:100%;
  object-fit:cover;
  filter:blur(10px);
  transform:scale(1.04);
  opacity:0;
  transition:filter .4s ease-out, transform .4s ease-out, opacity .4s ease-out;
}
.thumb img.loaded,
.m-thumb img.loaded{
  filter:blur(0);
  transform:scale(1);
  opacity:1;
}

/* BUTTONS */
.buttons{display:flex;gap:8px;margin-top:auto;flex-wrap:wrap;}

.btn{
  padding:10px 14px;border-radius:12px;
  font-weight:700;font-size:13px;
  cursor:pointer;transition:.25s;
  border:1px solid rgba(255,255,255,0.12);
  background:rgba(255,255,255,0.06);color:#fff;
  backdrop-filter:blur(6px);
  text-decoration:none;
  display:flex;align-items:center;justify-content:center;
}
.btn:hover{
  transform:translateY(-4px);
  background:linear-gradient(135deg,var(--accent),var(--link));
  border-color:transparent;
  box-shadow:0 0 12px rgba(255,45,111,0.6);
}

.btn.visit{
  background:linear-gradient(135deg,#ff2d6f,#ff5790);
  border:none; color:#fff;
  box-shadow:0 0 10px rgba(255,45,111,0.35);
}
.btn.visit:hover{
  background:linear-gradient(135deg,#ff4a85,#4db8ff);
  box-shadow:0 0 16px rgba(255,45,111,0.8);
}

/* SEO + PARTNERS */
.seo-partners{
  margin-top:40px;padding:30px;border-radius:14px;
  background:rgba(255,255,255,0.02);
  border:1px solid rgba(255,255,255,0.05);
  backdrop-filter:blur(8px);
}
.seo-title{
  margin:0 0 12px;font-size:24px;font-weight:700;
}
.seo-text{
  margin:0 0 12px;font-size:14px;color:#ccc;line-height:1.55;
}

.partner-grid{
  margin-top:22px;display:grid;
  grid-template-columns:repeat(3,1fr);gap:20px;
}
@media(max-width:900px){.partner-grid{grid-template-columns:1fr;}}

.partner-card{
  background:rgba(255,255,255,0.04);
  padding:18px;border-radius:12px;
  border:1px solid rgba(255,255,255,0.06);
  transition:.25s;
}
.partner-card:hover{
  transform:translateY(-8px);
  background:
    linear-gradient(var(--panel),var(--panel)) padding-box,
    linear-gradient(135deg,var(--accent),var(--link)) border-box;
  box-shadow:0 12px 22px rgba(255,45,111,0.35);
}
.partner-btn{
  padding:10px 14px;border-radius:10px;
  background:linear-gradient(135deg,var(--accent),var(--link));
  color:#fff;font-weight:700;font-size:13px;
  text-decoration:none;transition:.2s;
}
.partner-btn:hover{transform:translateY(-3px);}

/* FAQ */
.seo-faq{
  margin-top:28px;padding:26px;background:rgba(0,0,0,0.6);
  border-radius:14px;border:1px solid rgba(255,255,255,0.05);
}
.seo-faq h2{margin:0 0 12px;font-size:20px;}
.faq-item{margin-bottom:14px;}
.faq-item h3{margin:0 0 4px;font-size:15px;}
.faq-item p{margin:0;font-size:13px;color:#d0d0d0;line-height:1.55;}

/* FOOTER */
footer{
  margin-top:40px;padding:36px 16px 22px;
  text-align:center;background:rgba(20,20,20,0.55);
  backdrop-filter:blur(18px);
  border-top:1px solid rgba(255,255,255,0.08);
}
.footer-inner{display:flex;flex-direction:column;align-items:center;gap:16px;}
.footer-logo{
  width:64px;height:64px;border-radius:14px;
  background:linear-gradient(135deg,var(--link),var(--accent));
  font-weight:800;font-size:22px;color:#050505;
  display:flex;align-items:center;justify-content:center;
}
.footer-copy{color:#999;font-size:12px;margin:0;}
.keyword-cloud{
  margin-top:10px;font-size:11px;color:#777;
  max-width:900px;margin-left:auto;margin-right:auto;line-height:1.5;
}

/* MODAL (G1: bigger + scale-in + fade, minimal DOM) */
.modal-backdrop{
  position:fixed;
  inset:0;
  background:rgba(0,0,0,0.78);
  display:flex;
  align-items:center;
  justify-content:center;
  padding:16px;
  z-index:1200;
  opacity:0;
  pointer-events:none;
  transition:opacity .25s ease-out;
}
.modal-backdrop.open{
  opacity:1;
  pointer-events:auto;
}
.modal{
  width:100%;
  max-width:1280px;
  background:var(--panel);
  border-radius:16px;
  padding:28px;
  border:1px solid rgba(255,255,255,0.06);
  transform:scale(.96) translateY(8px);
  opacity:0;
  transition:transform .25s ease-out, opacity .25s ease-out;
}
.modal-backdrop.open .modal{
  transform:scale(1) translateY(0);
  opacity:1;
}
.modal-hero{
  display:flex;
  gap:24px;
  align-items:flex-start;
}
.m-thumb{
  width:560px;
  height:340px;
  border-radius:14px;
  background:#0b0b0b;
  overflow:hidden;
}

/* GALLERY */
.m-gallery{
  margin-top:16px;
}
.gal-inner{
  display:flex;
  align-items:center;
  gap:10px;
}
.gal-arrow{
  width:32px;
  height:32px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,0.25);
  background:rgba(255,255,255,0.05);
  color:#fff;
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  font-size:16px;
  flex:0 0 auto;
  transition:.2s;
}
.gal-arrow:hover{
  transform:translateY(-2px);
  background:rgba(255,255,255,0.12);
}
.gal-thumbs{
  display:flex;
  gap:8px;
  overflow-x:auto;
  padding-bottom:4px;
}
.gal-thumb{
  flex:0 0 auto;
  width:72px;
  height:52px;
  border-radius:8px;
  border:1px solid rgba(255,255,255,0.2);
  overflow:hidden;
  padding:0;
  margin:0;
  background:#050505;
  cursor:pointer;
  opacity:0.7;
  transition:.2s;
}
.gal-thumb img{
  width:100%;
  height:100%;
  object-fit:cover;
  filter:blur(6px);
  transform:scale(1.05);
  opacity:0;
  transition:filter .4s ease-out, transform .4s ease-out, opacity .4s ease-out;
}
.gal-thumb img.loaded{
  filter:blur(0);
  transform:scale(1);
  opacity:1;
}
.gal-thumb.active{
  opacity:1;
  border-color:var(--accent);
  box-shadow:0 0 8px rgba(255,45,111,0.65);
}
.gal-thumb:hover{
  opacity:1;
}

/* close button */
.close{
  float:right;
  background:transparent;
  border:0;
  color:#aaa;
  font-size:24px;
  cursor:pointer;
}
@media(max-width:960px){
  .modal-hero{flex-direction:column;}
  .m-thumb{width:100%;height:260px;}
}
.badge { display:none !important; }

.buttons { display:flex; gap:8px; margin-top:10px; }
.buttons .btn { flex:1; text-align:center; padding:12px; border-radius:10px; font-size:14px; }

.site-logo { display:none !important; }

.desc-under {
  margin: 8px 0 0;
  font-size: 14px;
  color: #ccc;
  line-height: 1.4;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Layout fix: title top aligned with photo */
.modal-hero {
  display:flex;
  align-items:flex-start !important;
}

/* Right block structure */
.modal-hero > div:last-child {
  display:flex;
  flex-direction:column;
  height:100%;
}

/* Title */
#modalTitle {
  font-size:45px !important;
  font-weight:900;
  margin:0 0 12px 0;
  line-height:1.05;
}

/* Description between title and buttons */
#modalDesc {
  margin:10px 0 20px 0;
  line-height:1.45;
  font-size:18px;
}

/* Buttons at bottom aligned with photo bottom */
.buttons {
  margin-top:auto !important;
}

/* Photo increased 20% */
.m-thumb {
  width:672px !important;
  height:408px !important;
}

/* Gallery bottom line aligned naturally */



/* === FIX: BIG TITLE ALWAYS === */
#modalTitle {
  font-size: 46px !important;
  font-weight: 900 !important;
  line-height: 1.05;
  margin: 0 0 14px 0;
}

/* Mobile */
@media(max-width:480px){
  #modalTitle {
    font-size: 32px !important;
  }
}



/* FIXED MODAL SPACING / BEAUTIFUL LAYOUT */
.modal-content {
  padding: 24px 28px !important;
  display: flex;
  gap: 28px;
  border-radius: 14px;
}

/* left photo */
.m-thumb {
  border-radius: 12px;
}

/* right column */
.m-info {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 16px;
}

/* gallery spacing */
.gallery-thumbs {
  margin-top: 8px;
  margin-bottom: 12px;
}

/* PREMIUM CLOSE BUTTON */
.close-modal {
  position: absolute;
  top: 14px;
  right: 18px;
  font-size: 28px;
  color: #fff;
  background: rgba(0,0,0,0.35);
  border: 1px solid rgba(255,255,255,0.25);
  backdrop-filter: blur(5px);
  padding: 4px 12px;
  border-radius: 8px;
  cursor: pointer;
  line-height: 1;
  transition: 0.25s ease;
}

.close-modal:hover {
  background: rgba(255,45,111,0.75);
  border-color: rgba(255,45,111,0.9);
  transform: scale(1.08);
}

.close-modal:active {
  transform: scale(0.92);
}


@media(max-width:600px){
  .btn.details {
    display:none !important;
  }
}





.hero-left h2 { margin:0 0 4px; }
.hero-left p  { margin:0; }





.hero-logos img:hover {
  transform:translateY(-3px);
  box-shadow:0 0 18px rgba(255,45,111,0.55);
}

@media(max-width:600px){
  
  
}


/* === 40% text + 60% logos layout === */








.hero-logos img:hover {
  transform: translateY(-3px);
  box-shadow: 0 0 18px rgba(255,45,111,0.55);
}

@media (max-width: 600px) {
  
  
  
}


/* MOBILE FIXES */
@media (max-width: 600px) {

  /* header stacked */
  .header, .header-inner {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 10px !important;
    padding: 16px !important;
  }

  .header-left {
    width: 100% !important;
  }

  .search-box {
    width: 100% !important;
  }

  /* filters spacing */
  .filters {
    margin-top: 14px !important;
  }

  /* hero spacing */
  .hero {
    margin-top: 12px !important;
  }

  /* hero-flex correction */
  

  

  
}


/* FIXED HERO LOGOS — FINAL VERSION */
.hero-flex {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
}

.hero-left {
  flex: 0 0 40%;
}

.hero-logos {
  flex: 0 0 60%;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.hero-logos img {
  width: 100%;
  max-width: 110px;
  height: auto;
  object-fit: contain;
  padding: 0;
  background: transparent;
  border: none;
  box-shadow: none;
  transition: .3s ease;
}

.hero-logos img:hover {
  transform: scale(1.08);
}

/* MOBILE FIX */
@media (max-width: 600px) {
  .hero-flex {
    flex-direction: column;
    text-align: center;
  }
  .hero-left {
    width: 100%;
  }
  .hero-logos {
    display: none !important;
  }
}

/* mega menu added */
 .filters.with-menu{display:flex;align-items:center;justify-content:space-between;} 
/* === MEGA MENU FIXED === */
.mega-dropdown{position:relative;display:block;}
.mega-btn{padding:8px 14px;background:rgba(255,255,255,0.06);color:#e6e6e6;border:1px solid #333;border-radius:10px;font-size:13px;cursor:pointer;transition:.25s;}
.mega-panel{position:absolute;top:42px;right:0;width:620px;padding:20px;display:none;gap:20px;background:rgba(20,20,20,0.92);border:1px solid rgba(255,255,255,0.08);border-radius:14px;backdrop-filter:blur(14px);box-shadow:0 0 24px rgba(0,0,0,0.55);z-index:500;}
.mega-dropdown:hover .mega-panel{display:grid;grid-template-columns:repeat(5,1fr);}
.mega-col h4{margin:0 0 8px;font-size:14px;color:#fff;}
.mega-col a{display:block;color:#4db8ff;font-size:13px;margin-bottom:6px;text-decoration:none;opacity:.8;transition:.2s;}
.mega-col a:hover{opacity:1;color:#fff;transform:translateX(3px);}
@media(max-width:700px){.mega-dropdown{display:none!important;}}