/* PREMIUM APP INFO TABLE (uses your :root vars) */
.app-info-premium{
  max-width:1100px;
  margin:var(--sp-lg) auto;
  padding:var(--sp-md);
  font-family:var(--font-family);
  color:var(--clr-text-pri);
}

/* Header (icon + title + actions) */
.app-info-header{
  display:flex;
  gap:var(--sp-md);
  align-items:center;
  justify-content:space-between;
  background: linear-gradient(180deg, var(--clr-bg), var(--clr-bg-alt));
  padding:calc(var(--sp-sm) + 4px);
  border-radius:var(--br-lg);
  border:1px solid var(--clr-border);
}

/* left group */
.app-info-left{ display:flex; gap:var(--sp-md); align-items:center; }
.app-info-icon{
  width:96px;
  height:96px;
  border-radius:18px;
  object-fit:cover;
  background:var(--clr-bg-alt);
  border:1px solid rgba(255,255,255,0.04);
}
.app-info-titles{ display:flex; flex-direction:column; gap:6px; }
.app-info-main-title{ margin:0; font-size:var(--fs-xl); font-weight:800; color:var(--clr-text-pri); }
.app-info-sub{ font-size:var(--fs-sm); color:var(--clr-text-sec); }

/* actions (badges + download) */
.app-info-actions{ display:flex; gap:12px; align-items:center; flex-wrap:wrap; }
.app-info-badges{ display:flex; gap:8px; align-items:center; flex-wrap:wrap; }
.pill{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:6px 10px;
  border-radius:999px;
  font-weight:700;
  font-size:var(--fs-sm);
  background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(0,0,0,0.01));
  border:1px solid rgba(0,0,0,0.04);
  color:var(--clr-text-pri);
}
.badge-version{ color:var(--clr-primary); border-color: rgba(108,99,255,0.08); }
.badge-size{ color:var(--clr-green); border-color: rgba(0,230,118,0.06); }
.badge-verified{ color:var(--clr-blue); border-color: rgba(59,130,246,0.06); }

/* Download button (glow + neumorphism) */
.btn{
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding:10px 16px;
  border-radius:12px;
  font-weight:800;
  text-decoration:none;
  cursor:pointer;
  border: none;
}
.download-primary{
  background:var(--grad-pri);
  color:var(--clr-primary-text);
  position:relative;
  overflow:visible;
  transition: transform var(--ts-fast), box-shadow var(--ts-fast), filter var(--ts-fast);
}
.download-primary:hover{ transform: translateY(-5px); filter:brightness(1.06); box-shadow: 0 22px 60px rgba(108,99,255,0.16); }
.download-primary .btn-sub{
  background: rgba(255,255,255,0.06);
  padding:6px 8px;
  border-radius:8px;
  font-weight:700;
  font-size:var(--fs-sm);
  border:1px solid rgba(255,255,255,0.04);
}

/* subtle glowing border */
.download-primary::before{
  content:"";
  position:absolute;
  inset:-6px;
  border-radius:16px;
  filter: blur(18px);
  background: linear-gradient(90deg, rgba(108,99,255,0.16), rgba(255,59,107,0.12));
  opacity:0;
  transform: scale(0.98);
  transition: opacity 300ms, transform 300ms;
  z-index:-1;
}
.download-primary:hover::before{ opacity:1; transform: scale(1); }

/* Table wrapper */
.app-info-table-wrap{
  margin-top:var(--sp-md);
  border-radius:var(--br-lg);
  overflow:hidden;
  background: linear-gradient(180deg, var(--clr-box), var(--clr-box-hover));
}

/* Premium table layout (two-column key/value with modern look) */
.app-info-table{
  width:100%;
  border-collapse:collapse;
  border-spacing:0;
    border:1px solid var(--clr-border);
  font-size:var(--fs-md);
}
.app-info-table tbody tr{
  border:1px solid var(--clr-border);
  padding:0;
}
.app-info-table tbody th,
.app-info-table tbody td{
  padding:14px 18px;
}
.app-info-table tbody th{
  text-align:left;
  color:var(--clr-text-sec);
  font-weight:700;
  background: linear-gradient(90deg, rgba(0,0,0,0.01), transparent);
  border-right:1px dashed var(--clr-border);
}
.app-info-table tbody td{
  text-align:left;
  color:var(--clr-text-pri);
  font-weight:600;
}

/* MD5 / mono */
.mono{ font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, "Roboto Mono", monospace; font-size:0.95rem; color:var(--clr-text-mute); }

/* row hover effect */
.app-info-table tbody tr:hover th,
.app-info-table tbody tr:hover td{
  background: rgba(108,99,255,0.02);
  transition: var(--ts-fast);
}

/* responsive: collapse rows into vertical key/value on small screens */
@media (max-width: 720px){
  .app-info-header{ flex-direction:column; align-items:flex-start; gap:var(--sp-sm); padding:var(--sp-sm); }
  .app-info-actions{ width:100%; justify-content:space-between; }
  .app-info-table tbody tr{ grid-template-columns: 1fr; }
  .app-info-table tbody th{ border-right:none; border-bottom:1px dashed var(--clr-border-light); padding:10px 12px; }
  .app-info-table tbody td{ padding:10px 12px; }
}

/* small utility */
.app-info-premium *{ box-sizing:border-box; will-change: transform, opacity; }



.slider-section { max-width: 1100px; margin: var(--sp-lg) auto; padding: 0 var(--sp-md); }
.screenshots-heading { font-family: var(--font-family); font-size: var(--fs-xl); color:var(--clr-text-pri); margin-bottom: var(--sp-md); font-weight:800; text-align:left; }

/* Slider container */
.screenshot-slider { position: relative; display:flex; align-items:center; gap:12px; }

/* viewport hides overflow */
.slider-viewport { overflow:hidden; flex:1; border-radius:calc(var(--br-lg) + 2px); outline:none; }

/* track with flex slides */
.slider-track { display:flex; gap:var(--sp-md); transition: transform 420ms cubic-bezier(.22,.9,.28,1); will-change: transform; padding: var(--sp-sm); align-items:center; }

/* slide sizing controlled via JS, but set basis and center look */
.slide { flex: 0 0 auto; display:flex; align-items:center; justify-content:center; scroll-snap-align:center; }

/* image styling */
.slide-img {
  width: 100%;
  height: auto;
  max-height: 420px;
  border-radius: var(--br-lg);
  object-fit: cover;
  background: var(--clr-bg-alt);
  border: 1px solid var(--clr-border-light);
  box-shadow: var(--sd-md);
  transition: transform var(--ts-fast), box-shadow var(--ts-fast);
  cursor: pointer;
  display:block;
  opacity: 0;
  transform: translateY(8px) scale(.995);
}

/* visible image state */
.slide-img.loaded { opacity:1; transform: translateY(0) scale(1); }

/* hover pop */
.slide-img:hover { transform: translateY(-6px) scale(1.02); box-shadow: var(--sd-lg); }

/* arrows */
.slider-btn {
  background: var(--clr-box);
  border: 1px solid var(--clr-border);
  color: var(--clr-text-pri);
  width:44px; height:44px; border-radius:12px;
  display:flex; align-items:center; justify-content:center;
  cursor:pointer; box-shadow:var(--sd-sm);
  transition: transform var(--ts-fast), box-shadow var(--ts-fast);
}
.slider-btn:hover { transform: translateY(-4px); box-shadow:var(--sd-lg); }
.slider-prev { margin-right:6px; }
.slider-next { margin-left:6px; }

/* controls (dots + play) */
.slider-controls { position:absolute; right:8px; bottom:-48px; display:flex; gap:8px; align-items:center; }
.slider-dots { display:flex; gap:6px; align-items:center; }
.slider-dot {
  width:10px; height:10px; border-radius:999px; background:var(--clr-border);
  border: 1px solid rgba(0,0,0,0.04); cursor:pointer; transition: transform 200ms;
}
.slider-dot.active { background:var(--clr-primary); transform: scale(1.15); box-shadow: 0 6px 16px var(--clr-pri-alpha); }
.slider-play { background:transparent; border:none; cursor:pointer; font-size:16px; color:var(--clr-text-sec); }

/* lightbox overlay */
.slider-lightbox {
  position: fixed; inset: 0; display:none; align-items:center; justify-content:center;
  background: rgba(7,10,30,0.7); z-index:9999; padding: 32px;
}
.slider-lightbox.open { display:flex; }
.lightbox-stage { max-width: 90vw; max-height: 80vh; display:flex; align-items:center; justify-content:center; overflow:hidden; }
.lightbox-img { max-width:100%; max-height:100%; border-radius:12px; box-shadow: 0 30px 80px rgba(0,0,0,0.6); }

/* lightbox nav + close */
.lightbox-close, .lightbox-prev, .lightbox-next, .lightbox-download {
  position: absolute; background: rgba(255,255,255,0.06); color: var(--clr-primary-text); border:1px solid rgba(255,255,255,0.06);
  padding:10px 12px; border-radius:10px; cursor:pointer; backdrop-filter: blur(4px);
}
.lightbox-close { top:28px; right:28px; font-size:22px; }
.lightbox-prev { left: 24px; top:50%; transform:translateY(-50%); }
.lightbox-next { right:24px; top:50%; transform:translateY(-50%); }
.lightbox-download { bottom:28px; right:28px; text-decoration:none; display:inline-flex; gap:8px; align-items:center; }

/* responsive: slides per view are controlled by JS but ensure track behavior */
@media (max-width: 900px) {
  .slide-img { max-height: 360px; }
  .slider-controls { bottom:-56px; right:6px; }
}
@media (max-width: 520px) {
  .slide-img { max-height: 420px; }
  .slider-btn { width:40px; height:40px; }
  .slider-controls { bottom:-64px; left:50%; transform:translateX(-50%); right:auto; }
}











/* Container */
#download-section.download-box{
  margin-top: var(--sp-xl);
  text-align: center;
  padding: calc(var(--sp-lg) + 6px) var(--sp-lg);
  background: linear-gradient(180deg, var(--clr-bg), var(--clr-bg-alt));
  border-radius: calc(var(--br-xl) + 4px);
  border: 1px solid rgba(108,99,255,0.06);
}

/* Title & subtitle */
.download-title{
  font-size: var(--fs-xl);
  font-weight: 800;
  color: var(--clr-text-pri);
  margin-bottom: var(--sp-xs);
  letter-spacing: -0.2px;
}
.download-subtitle{
  color: var(--clr-text-sec);
  font-size: var(--fs-md);
  margin-bottom: var(--sp-md);
}

/* Meta row: badges + download count */
.download-meta-row{
  display:flex;
  max-width: 500px;
  align-items:center;
  justify-content:space-between;
  gap:var(--sp-md);
  margin: auto;
  margin-bottom:var(--sp-md);
  flex-wrap:wrap;
}

/* Badges */
.download-badges{
  display:flex;
  gap:8px;
  align-items:center;
  justify-content:center;
  flex-wrap:wrap;
}
.badge{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:6px 10px;
  border-radius:999px;
  font-weight:700;
  font-size:var(--fs-sm);
  border:1px solid rgba(0,0,0,0.04);
  background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(0,0,0,0.01));
  color:var(--clr-text-pri);
  /*box-shadow: 0 6px 18px rgba(10,12,30,0.03);*/
}

/* specific badge colors */
.badge-version{ background: linear-gradient(90deg, rgba(108,99,255,0.08), rgba(59,130,246,0.03)); color:var(--clr-primary); border:1px solid rgba(108,99,255,0.08); }
.badge-size{ background: linear-gradient(90deg, rgba(0,230,118,0.03), rgba(159,255,204,0.01)); color:var(--clr-green); border:1px solid rgba(0,230,118,0.06); }
.badge-safe{ background: linear-gradient(90deg, rgba(255,245,157,0.03), rgba(255,200,80,0.01)); color:var(--clr-yellow); border:1px solid rgba(255,200,80,0.06); }
.badge-verified{ background: linear-gradient(90deg, rgba(59,130,246,0.04), rgba(108,99,255,0.02)); color:var(--clr-blue); border:1px solid rgba(59,130,246,0.06); }

/* Download count indicator */
.download-count{
  display:flex;
  flex-direction:column;
  align-items:flex-end;
  gap:4px;
  min-width:100px;
  color:var(--clr-text-sec);
  font-size:var(--fs-sm);
}
.count-number{
  font-size:var(--fs-lg);
  font-weight:800;
  color:var(--clr-text-pri);
}
.count-label{ font-size:var(--fs-xs); color:var(--clr-text-mute); }

/* Primary Download Button — base */
.download-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:12px;
  padding: calc(var(--sp-sm) + 6px) calc(var(--sp-lg) + 6px);
  font-size: var(--fs-lg);
  font-weight:800;
  text-decoration:none;
  color: var(--clr-primary-text);
  background: var(--grad-pri);
  border-radius: calc(var(--br-xl) - 2px);
  border: none;
  cursor: pointer;
  position: relative;
  overflow: visible;
  margin: 0 auto;
  box-shadow: 0 12px 36px var(--clr-pri-alpha);
  transition: transform var(--ts-fast), box-shadow var(--ts-fast), filter var(--ts-fast);
}

/* inner & small badge on button */
.download-btn .btn-inner{ display:inline-block; padding-right:6px; }
.download-btn .btn-badge{
  display:inline-block;
  background: rgba(255,255,255,0.08);
  color: var(--clr-primary-text);
  font-weight:700;
  padding:6px 10px;
  border-radius:999px;
  font-size:var(--fs-sm);
  border:1px solid rgba(255,255,255,0.06);
}

/* Button hover/active */
.download-btn:hover{
  transform: translateY(-6px);
  filter: brightness(1.06);
  box-shadow: 0 20px 50px rgba(108,99,255,0.12);
}
.download-btn:active{ transform: translateY(-2px); }

/* Glowing animated border (pseudo element) */
.download-btn-glow::before{
  content: "";
  position: absolute;
  inset: -4px;
  border-radius: calc(var(--br-xl) - 0px);
  background: linear-gradient(90deg, rgba(108,99,255,0.18), rgba(255,59,107,0.12), rgba(59,130,246,0.12));
  filter: blur(20px);
  opacity: 0;
  transition: opacity 350ms ease, transform 350ms ease;
  z-index: -1;
  transform: scale(0.96);
  pointer-events: none;
}
.download-btn-glow:hover::before{
  opacity: 1;
  transform: scale(1);
}

/* subtle inner border for premium look */
.download-btn::after{
  content: "";
  position: absolute;
  inset: 1px;
  border-radius: calc(var(--br-xl) - 3px);
  border: 1px solid rgba(255,255,255,0.06);
  pointer-events: none;
}

/* Note */
.download-note{
  margin-top: var(--sp-md);
  font-size: var(--fs-sm);
  color: var(--clr-text-pri);
  font-weight:600;
  opacity: 0.95;
}

/* Mobile adjustments */
@media (max-width: 700px){
  .download-meta-row{
    flex-direction: column;
    align-items: center;
    gap: var(--sp-sm);
  }
  .download-count{ align-items:center; text-align:center; }
  .count-number{ font-size: 1.1rem; }
  .download-btn{ width:100%; padding: calc(var(--sp-sm) + 10px); font-size: var(--fs-md); }
  .download-btn .btn-badge{ display:none; } /* hide small badge on narrow screens */
}

/* lightweight transition utilities (optional) */
.badge, .download-btn, .download-box { will-change: transform, opacity; }



.tool-container {
  margin: auto;
  max-width: var(--mw-main);
}
/* Main Download Box */
#download-section.download-box {
  margin-top: var(--sp-xl);
  text-align: center;
  padding: var(--sp-xl);
  background: var(--clr-box);
  border-radius: var(--br-xl);
  box-shadow: var(--sd-lg);
  border: 1px solid var(--clr-border);
}
/* Title */
.download-title {
  font-size: var(--fs-xl);
  font-weight: 700;
  color: var(--clr-text-pri);
  margin-bottom: var(--sp-sm);
}
/* Subtitle */
.download-subtitle {
  color: var(--clr-text-sec);
  font-size: var(--fs-md);
  margin-bottom: var(--sp-lg);
}
/* MAIN BUTTON */
.download-btn {
  display: inline-block;
  padding: var(--sp-md) var(--sp-xl);
  font-size: var(--fs-xl);
  font-weight: 700;
  text-decoration: none;
  color: var(--clr-primary-text);
  background: var(--grad-pri);
  border-radius: var(--br-xl);
  box-shadow: var(--sd-lg);
  transition: var(--ts-fast);
}
/* Hover Animation */
.download-btn:hover {
  transform: translateY(-5px);
  filter: brightness(1.12);
}
/* Verified Note */
.download-note {
  margin-top: var(--sp-md);
  font-size: var(--fs-sm);
  color: var(--clr-green);
  font-weight: 600;
}
/* Mobile */
@media (max-width: 600px) {
  #download-section.download-box {
    padding: var(--sp-lg);
  }
  .download-btn {
    font-size: var(--fs-lg);
    padding: var(--sp-sm) var(--sp-lg);
  }
}

/* Outer container */
.feature-container {
  max-width: 1000px;
  margin: var(--sp-xl) auto;
  padding: 0 var(--sp-md);
}

/* Heading */
.feature-heading {
  font-family: var(--font-family);
  font-size: var(--fs-xl);
  color: var(--clr-text-pri);
  margin-bottom: var(--sp-md);
  font-weight: 800;
  letter-spacing: -0.3px;
  text-align: center;
}

/* Grid wrapper */
.feature-wrapper {
  margin-top: var(--sp-md);
  display: grid;
  gap: var(--sp-lg);
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}

/* Individual Card */
.feature-card {
  background: var(--clr-box);
  border-radius: var(--br-lg);
  padding: calc(var(--sp-lg) * 1.05);
  box-shadow: var(--sd-md);
  text-align: center;
  transition: transform var(--ts-md), box-shadow var(--ts-md), background var(--ts-md);
  border: 1px solid var(--clr-border);
}

/* Hover Effect */
.feature-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--sd-lg);
  background: var(--clr-box-hover);
}

/* Icon */
.feature-icon {
  font-size: 4.4rem;
  margin-bottom: var(--sp-md);
  display: inline-block;
  color: var(--clr-primary);
  filter: drop-shadow(0 3px 6px var(--clr-pri-alpha));
}

/* Title */
.feature-title {
  font-size: var(--fs-lg);
  font-weight: 700;
  margin-bottom: var(--sp-sm);
  color: var(--clr-text-pri);
}

/* Text */
.feature-text {
  font-size: var(--fs-md);
  color: var(--clr-text-sec);
  line-height: 1.6;
}

/* Responsive */
@media (max-width: 900px) {
  .feature-wrapper {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 520px) {
  .feature-wrapper {
    grid-template-columns: 1fr;
  }
  .feature-card {
    padding: var(--sp-md);
  }
  .feature-heading {
    font-size: var(--fs-xl);
  }
}

/* FAQ Container */
.faq-container {
  max-width: 1000px;
  margin: var(--sp-xl) auto;
  padding: 0 var(--sp-md);
}

/* Heading */
.faq-heading {
  text-align: center;
  font-size: var(--fs-xl);
  font-weight: 800;
  color: var(--clr-text-pri);
  margin-bottom: var(--sp-lg);
  letter-spacing: -0.3px;
}

/* Wrapper */
.faq-wrapper {
  display: flex;
  flex-direction: column;
  gap: var(--sp-md);
}

/* Single FAQ Card */
.faq-card {
  background: var(--clr-box);
  border-radius: var(--br-lg);
  padding: var(--sp-lg);
  border: 1px solid var(--clr-border);
  box-shadow: var(--sd-sm);
  cursor: pointer;
  transition: var(--ts-md);
  overflow: hidden;
  position: relative;
}

/* Hover Effect */
.faq-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--sd-lg);
  background: var(--clr-box-hover);
}

/* Title */
.faq-title {
  font-size: var(--fs-md);
  font-weight: 700;
  color: var(--clr-text-pri);
  display: flex;
  align-items: center;
  gap: var(--sp-sm);
  margin: 0;
  cursor: pointer;
}

/* Icon style */
.faq-title i {
  color: var(--clr-primary);
  font-size: 1.2rem;
  filter: drop-shadow(0 2px 4px var(--clr-pri-alpha));
}

/* Description (Hidden by default) */
.faq-desc {
  font-size: var(--fs-md);
  color: var(--clr-text-sec);
  line-height: 1.6;
  margin-top: var(--sp-sm);
  display: none;
}

/* Active FAQ (Open State) */
.faq-card.active .faq-desc {
  display: block;
  animation: faqOpen 0.3s ease;
}

/* Smooth open animation */
@keyframes faqOpen {
  from {
    opacity: 0;
    transform: translateY(6px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Mobile Responsive */
@media (max-width: 520px) {
  .faq-heading {
    font-size: var(--fs-xl);
  }
  .faq-card {
    padding: var(--sp-md);
  }
}

/* Post */
.post {
  width: 96%;
  margin: 30px auto;
  padding: 30px calc(10px + 0.8vw);
  
  & .post-body {
    gap: 20px;
    margin: auto;
    display: flex;
    text-align: left;
    flex-direction: column;
    width: calc(96% - 1vw);
    max-width: var(--mw-home);

    & p {
      font-size: 16px;
      line-height: 1.5;
    }

    & :is(h2, h3, h4, h5, h6) {
      font-weight: 549;
      text-align: left;
      line-height: 1.2;
      text-transform: capitalize;
    }

    & h2 {
      font-size: 22px;
    }
    & h3 {
      font-size: 20px;
    }
    & h4 {
      font-size: 19px;
    }
    & h5 {
      font-size: 17px;
    }
    & h6 {
      font-size: 15px;
    }
    & img {
      width: 98%;
      margin: auto;
      height: auto;
      border-radius: 6px;
      border: 1px solid #eee;
      max-width: 500px;
      max-height: 400px;
    }
    & a {
      color: var(--clr-primary);
      text-decoration: underline;
      text-underline-offset: 3px;
      text-transform: capitalize;
      font-weight: 510;
    }
    & :is(ol, ul) {
      gap: 8px;
      display: flex;
      font-size: 14px;
      list-style: none;
      line-height: 1.2;
      margin-left: 15px;
      flex-direction: column;
      counter-reset: PostOlCount;
      & li {
        &::before {
          width: 20px;
          height: 20px;
          content: '\2713';
          display: flex;
          min-width: 20px;
          max-width: 20px;
          font-size: 15px;
          min-height: 20px;
          max-height: 20px;
          line-height: 20px;
          margin-right: 5px;
          border-radius: 50%;
          align-items: center;
          display: inline-flex;
          justify-content: center;
          color: var(--clr-light);
          background: var(--clr-primary);
        }
      }
    }
    & ol li::before {
      content: counter(PostOlCount);
      counter-increment: PostOlCount 1;
      background: var(--clr-secondary);
    }
  }
}