:root{
  --accent-color: #ff7a00;
  --accent-color-hover: #ff944a;
  --text-muted: rgba(255,255,255,0.15);
  --radius: 22px;
}

/* global box-sizing */
*{box-sizing:border-box}

/* wrapper */
#sq-slider{
  position: relative;
  height: 460px;
  overflow: hidden;
  border-radius: var(--radius);
  background: transparent;
  margin: 40px auto;
  max-width: 100%;
  width: 100%;
  padding: 0 20px;
}

/* track */
#slides{
  display:flex;
  gap:28px;
  height:100%;
  transition: transform 0.95s cubic-bezier(0.32,0.72,0,1);
  flex-wrap:nowrap;
  align-items:center;
}

/* slide */
.slide{
  flex: 0 0 auto;
  width:560px;
  height: 90%;
  border-radius: var(--radius);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  position: relative;
  border: 4px solid transparent;
  box-shadow: 0 20px 25px -5px rgba(0,0,0,0.6);
  transition: all 0.95s cubic-bezier(0.32,0.72,0,1);
  overflow: hidden;
  display:flex;
  align-items:center;
  justify-content:center;
}

/* dim overlay */
.slide::before{
  content:'';
  position:absolute;
  inset:0;
  border-radius:inherit;
  background: linear-gradient(180deg, rgba(6,8,12,0.6), rgba(6,8,12,0.6));
  z-index:1;
}

/* center card (NO fixed width) */
.slide .center-card{
  position:relative;
  z-index:2;
  width:100%;
  max-width:720px;
  height:380px;
  border-radius:20px;
  padding:28px;
  display:flex;
  gap:18px;
  align-items:center;
  background: linear-gradient(180deg, rgba(8,10,14,0.6), rgba(8,10,14,0.45));
  box-shadow: 0 18px 40px rgba(0,0,0,0.65), inset 0 0 36px rgba(255,122,0,0.04);
  border: 2px solid rgba(255,122,0,0.12);
  backdrop-filter: blur(6px);
  overflow: hidden;
  transform: translateY(0);
  transition: transform .35s ease, box-shadow .35s ease, opacity .35s ease;
}

/* glow (below content) */
.slide .center-card::after{
  content:'';
  position:absolute;
  inset:6px;
  border-radius:16px;
  pointer-events:none;
  z-index:1; /* ensure it's below content */
  box-shadow: 0 6px 28px rgba(255,122,0,0.12), inset 0 0 18px rgba(255,150,60,0.04);
  border: 1px solid rgba(255,140,50,0.12);
}

/* left content */
.center-card .card-left{
  width:58%;
  padding-left:8px;
  color:#fff;
  z-index:2;
  word-wrap:break-word;
  hyphens:auto;
}
.center-card .logo{
  width:auto;
  max-width:140px;
  max-height:68px;
  height:auto;
  margin-bottom:8px;
  filter: drop-shadow(0 8px 20px rgba(255,122,0,0.06));
  display:block;
  object-fit:contain;
}
.center-card h2{
  font-size:26px;
  margin:6px 0 8px;
  line-height:1.05;
  letter-spacing:0.6px;
  color:#fff;
  font-weight:800;
  text-transform:uppercase;
  text-shadow: 0 2px 6px rgba(0,0,0,0.6);
}
.center-card p{
  font-size:15px;
  color: rgba(255,255,255,0.95);
  margin-bottom:12px;
  line-height:1.5;
  text-shadow: 0 1px 3px rgba(0,0,0,0.6);
  display:block;
}

/* right actions */
.center-card .card-right{
  width:36%;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:12px;
  padding-right:6px;
  z-index:3; /* buttons should be above card::after */
  position:relative;
}
.center-card .btn{
  width:86%;
  padding:12px 14px;
  border-radius:10px;
  font-weight:700;
  cursor:pointer;
  border:2px solid rgba(255,255,255,0.04);
  transition: transform .15s ease, box-shadow .15s ease;
  text-align:center;
  display:inline-block;
}
.center-card .btn-primary{
  background: linear-gradient(180deg,var(--accent-color), #e85b00);
  color:white;
  box-shadow: 0 10px 30px rgba(255,122,0,0.14);
}
.center-card .btn-secondary{
  background: transparent;
  color: #ffd9b8;
  border: 2px solid rgba(255,140,60,0.18);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.02);
}
.center-card .btn:hover{ transform: translateY(-3px); }

/* non-active slides */
.slide:not(.active){
  transform: scale(0.70);
  opacity:0.52;
  filter: brightness(0.45) saturate(0.9);
  pointer-events:none;
}

/* active */
.slide.active{
  transform: scale(1) translateY(-8px);
  pointer-events: auto;
  z-index: 10;
}
.slide.active .center-card{
  transform: translateY(-8px);
  box-shadow: 0 26px 60px rgba(0,0,0,0.7), 0 0 36px rgba(255,122,0,0.08);
  opacity:1;
}

/* ====================== SQ SLIDER BUTTONS ====================== */
#sq-slider button {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 50;
}

.sq-slider-btn,
#prev-btn,
#next-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    padding: 0;
    color: #ffffff;
    background: #0d0d10;
    border: 1px solid #303038;
    border-radius: 9px;
    font-size: 22px;
    font-weight: 800;
    cursor: pointer;
    box-shadow: 0 6px 16px -4px rgba(0, 0, 0, 0.5);
    transition: all 0.3s ease;
}

#prev-btn { left: 14px; }
#next-btn { right: 14px; }

/* Hover */
.sq-slider-btn:hover,
#prev-btn:hover,
#next-btn:hover {
    color: #111114;
    background: linear-gradient(180deg, #ff9828, #ff7900);
    border-color: #ff9828;
    transform: translateY(-50%) scale(1.08);
}

/* Opcjonalnie - aktywny stan */
.sq-slider-btn:active {
    transform: translateY(-50%) scale(0.95);
}



/* dots (default over slider on desktop) */
#dots{
  position:absolute;
  bottom:18px;
  left:50%;
  transform:translateX(-50%);
  display:flex;
  gap:10px;
  z-index:60;
}
#dots button{
  all: unset;
  width:11px;height:11px;border-radius:50%;
  background:var(--text-muted);
  cursor:pointer;
  transition: all .25s ease;
  box-shadow:none;
}
#dots button.active{
  background: var(--accent-color);
  transform: scale(1.45);
  box-shadow: 0 0 14px rgba(255,122,0,0.9);
}

/* ==================== RESPONSYWNOŚĆ ==================== */
@media (max-width:1024px){
  .slide{ width:480px; }
  .center-card{ max-width:640px; height:340px; }
}

/* MOBILE FIXES: stack, buttons under text, full-width buttons, dots moved below slider */
@media (max-width:768px){
  #sq-slider{ height: auto; padding: 0 12px; margin: 22px auto; }

  .slide{
    width: calc(100vw - 60px);
    height: auto;
    display:flex;
    align-items:center;
    justify-content:center;
    padding: 18px 0;
  }

  .center-card{
    width: calc(100% - 24px);
    max-width: none;
    height: auto;
    padding: 16px;
    flex-direction: column;
    gap: 12px;
    align-items: flex-start;
  }

  /* content stacking & ordering */
  .center-card .card-left{ width:100%; padding:0; order:1; z-index:2; }
  .center-card .card-right{
    width:100%;
    flex-direction: column; /* stack vertically */
    gap:8px;
    justify-content:flex-start;
    order:2;
    margin-top:6px;
    z-index:4; /* ensure buttons are above text and ::after */
  }

  /* buttons full-width on mobile */
  .center-card .btn{
    width:100%;
    padding:12px 12px;
    border-radius:10px;
    font-size:15px;
  }

  /* add spacing under paragraphs to avoid overlap */
  .center-card p{ margin-bottom:16px; line-height:1.5; }

  /* heading smaller */
  .center-card h2{ font-size:20px; line-height:1.05; margin-bottom:6px; }

  /* logo resize */
  .center-card .logo{ max-width:120px; max-height:60px; }

  /* visible scaling adjustments */
  .slide.active{ transform: scale(1) translateY(0); }
  .slide:not(.active){ transform: scale(0.9); opacity:0.85; }

  /* move dots below slider so they don't overlap content */
  #dots{
    position:relative;
    bottom:auto;
    transform:none;
    left:auto;
    margin:8px auto 0;
    display:flex;
    justify-content:center;
  }

  /* hide arrows on mobile */
  #sq-slider > button{ display:none; }
}

/* very small screens */
@media (max-width:420px){
  .center-card h2{ font-size:18px; line-height:1.05; }
  .center-card p{ font-size:14px; }
  .center-card .logo{ max-width:96px; max-height:56px; }
  #dots button{ width:10px; height:10px; }
}