:root {
   --bg: #000;
   --card: #222222;
   --panel: #0b0b0b;
   --text: #e9eef2;
   --muted: #aab3bd;
   --gold1: #f5d37a;
   --gold2: #caa24e;
   --brand: #00c853;
   /* WhatsApp green */
   --tg: #229ED9;
   /* Telegram blue */
   --shadow: 0 8px 24px rgba(0, 0, 0, .6);
   --radius: 14px;
   --container: 1060px;
 }

 * {
   box-sizing: border-box
 }

 html,
 body {
   margin: 0;
 }

 body {
   background: var(--bg);
   color: var(--text);
   font: 15px/1.6 ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Inter, Arial;
   display: flex;
   flex-direction: column;
 }

 .pussy888 {
   background: linear-gradient(to bottom, #440c0c, #000000);
 }

 .newton {
   background: linear-gradient(to bottom, #8c9c84, #000000);
 }

 .mega888 {
   background: linear-gradient(to bottom, #9cbcf4, #000000);
 }

 .kiss918 {
   background: linear-gradient(to bottom, #d4d4dc, #000000);
 }

 .container {
   width: min(92%, var(--container));
   margin-inline: auto;
 }

 /* Header / Logo */
 header {
   padding: 22px 0
 }

 .logo {
   display: block;
   width: 310px;
   max-width: 72%;
   margin: 0 auto;
   margin-top: 20px;
   margin-bottom: 20px;
 }

 /* Smaller version on mobile */
 @media (max-width: 480px) {
   .logo {
     width: 250px;
     /* shrink logo */
     max-width: 60%;
     /* adjust proportion */
   }
 }

 /* Modern Carousel */
 .carousel-container {
   position: relative;
   margin: 0 auto 20px;
   border-radius: 16px;
   overflow: hidden;
   background: linear-gradient(to bottom, #0a1622, #081018);
   box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
   border: 1px solid rgba(255, 215, 0, 0.8);
 }

 .carousel-wrapper {
   position: relative;
   height: 0;
   padding-bottom: 50%;
   /* 2:1 aspect ratio */
   overflow: hidden;
 }

 .carousel-slides {
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   display: flex;
   transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
 }

 .carousel-slide {
   flex: 0 0 100%;
   position: relative;
   overflow: hidden;
 }

 .carousel-slide img {
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   object-fit: cover;
   object-position: center;
   transition: transform 0.5s ease;
 }

 .carousel-slide.active img {
   transform: scale(1.02);
 }

 /* Navigation arrows */
 .carousel-arrow {
   position: absolute;
   top: 50%;
   transform: translateY(-50%);
   width: 40px;
   height: 40px;
   background: rgba(0, 0, 0, 0.5);
   border-radius: 50%;
   display: flex;
   align-items: center;
   justify-content: center;
   color: white;
   cursor: pointer;
   z-index: 10;
   border: none;
   outline: none;
   transition: background 0.3s, transform 0.3s;
 }

 .carousel-arrow:hover {
   background: rgba(0, 0, 0, 0.7);
   transform: translateY(-50%) scale(1.1);
 }

 .carousel-arrow.prev {
   left: 10px;
 }

 .carousel-arrow.next {
   right: 10px;
 }

 /* Indicators */
 .carousel-indicators {
   position: absolute;
   bottom: 15px;
   left: 0;
   right: 0;
   display: flex;
   justify-content: center;
   gap: 8px;
   z-index: 10;
 }

 .carousel-indicator {
   width: 8px;
   height: 8px;
   border-radius: 50%;
   background: rgba(255, 255, 255, 0.3);
   border: none;
   cursor: pointer;
   transition: all 0.3s ease;
   padding: 0;
 }

 .carousel-indicator.active {
   background: white;
   transform: scale(1.3);
 }



 /* Game cards */
 .games {
   display: grid;
   grid-template-columns: repeat(3, 1fr);
   gap: 16px;
   margin: 20px 0 10px;
 }

 .card {
   background: var(--card);
   border: 1px solid #222;
   border-radius: 12px;
   padding: 18px 14px;
   text-align: center;
   box-shadow: var(--shadow);
   transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
   text-decoration: none;
 }

 .card:hover {
   transform: translateY(-3px);
   border-color: #2f2f2f;
   box-shadow: 0 16px 30px rgba(0, 0, 0, .55)
 }

 .card .icon img {
   width: 80px;
   height: 80px;
   object-fit: contain;
 }

 .card b {
   display: block;
   margin-top: 4px;
   letter-spacing: .3px;
   color: white;
   font-weight: normal;
 }

 /* Rollex11 APK Info Section */
 .apk-header {
   display: flex;
   align-items: flex-start;
   margin-bottom: 15px;
 }

 .apk-icon {
   margin-right: 15px;
   background-color: #000;
   border-radius: 10px;
   padding: 5px;
   width: 70px;
   height: 70px;
   display: flex;
   align-items: center;
   justify-content: center;
 }

 .apk-icon img {
   width: 100%;
   height: auto;
   border-radius: 8px;
 }

 .apk-title h2 {
   margin: 0 0 5px 0;
   font-size: 20px;
   font-weight: bold;
 }

 .rating {
   display: flex;
   align-items: center;
   margin-bottom: 3px;
 }

 .stars {
   color: #ffb400;
   margin: 0 5px;
 }

 .rating-value {
   color: #aaa;
 }

 .file-size {
   color: #aaa;
   font-size: 14px;
 }

 .apk-details {
   color: white;
 }

 .detail-row {
   margin-bottom: 8px;
   line-height: 1.4;
 }

 .detail-row {
   margin-bottom: 8px;
   line-height: 1.4;
 }

 .label {
   font-weight: bold;
   margin-right: 5px;
 }

 /* CTA box */
 .cta {
   background: white;
   border-radius: 12px;
   box-shadow: var(--shadow);
   margin: 18px 0 24px;
   padding: 22px 18px;
   text-align: center;
 }

 .brand-lockup {
   display: flex;
   flex-direction: column;
   align-items: center;
   gap: 8px;
   margin-bottom: 10px;
 }

 .brand-lockup img {
   width: 120px;
   height: auto;
   display: block
 }

 .btns {
   display: flex;
   justify-content: center;
   gap: 10px;
   flex-wrap: wrap
 }

 .btn {
   appearance: none;
   border: 0;
   cursor: pointer;
   padding: 10px 14px;
   border-radius: 999px;
   font-weight: 700;
   display: inline-flex;
   align-items: center;
   gap: 8px;
   color: #02110a;
   background: #eee;
   text-decoration: none;
   transition: transform .15s ease, filter .15s ease;
 }

 .btn svg {
   width: 18px;
   height: 18px
 }

 .btn:active {
   transform: translateY(1px)
 }

 .btn.whatsapp {
   background: linear-gradient(180deg, #38ef7d, #00c853);
   color: white;
   animation: pulse-whatsapp 2s infinite;
 }

 .btn.telegram {
   background: linear-gradient(180deg, #69c7ff, #229ED9);
   color: white;
   animation: pulse-telegram 2s infinite;
 }

 @keyframes pulse-whatsapp {
   0% {
     box-shadow: 0 0 0 0 rgba(0, 200, 83, 0.7);
   }

   70% {
     box-shadow: 0 0 0 10px rgba(0, 200, 83, 0);
   }

   100% {
     box-shadow: 0 0 0 0 rgba(0, 200, 83, 0);
   }
 }

 @keyframes pulse-telegram {
   0% {
     box-shadow: 0 0 0 0 rgba(34, 158, 217, 0.7);
   }

   70% {
     box-shadow: 0 0 0 10px rgba(34, 158, 217, 0);
   }

   100% {
     box-shadow: 0 0 0 0 rgba(34, 158, 217, 0);
   }
 }

 /* Content */
 .content {
   margin: 12px 0 60px
 }

 .content section {
   background: #222222;
   border: 1px solid #222;
   border-radius: 12px;
   padding: 18px 18px 20px;
   margin-bottom: 12px;
   box-shadow: var(--shadow);
 }

 h1,
 h2 {
   margin: .2em 0 .35em;
   line-height: 1.25
 }

 h1 {
   font-size: clamp(20px, 2.6vw, 24px);
   background: linear-gradient(90deg, var(--gold1), var(--gold2));
   -webkit-background-clip: text;
   background-clip: text;
   color: transparent;
   letter-spacing: .2px;
   font-weight: 800;
 }

 h2 {
   font-size: clamp(18px, 2.2vw, 20px);
   color: #f7f7f7;
   font-weight: 800;
 }

 p {
   color: var(--muted);
   margin: .2em 0 .6em
 }

 a {
  color: #75c3ff;
 }

 /* Footer */
 .site-footer {
   padding: 20px 0;
   text-align: center;
   color: var(--muted);
   font-size: 14px;
 }

 /* Download Section */
 .download-section {
   margin: 20px 0;
 }

 .download-container {
   display: flex;
   justify-content: space-between;
   gap: 15px;
   align-items: stretch;   /* ✅ Make all cards equal height */
 }

 .download-card {
   flex: 1;
   background: white;
   border-radius: 12px;
   padding: 20px;
   text-align: center;
   box-shadow: var(--shadow);
   display: flex;          /* ✅ Flex layout inside */
  flex-direction: column; /* ✅ Stack content vertically */
  justify-content: space-between; /* ✅ Push button to bottom */
 }

@media (max-width: 600px) {
  .download-card{
    width: 100%;                 /* use the available width */
    max-width: 360px;            /* but don't get too wide on large phones */
    margin: 0 auto;              /* keep centered even if parent rules change */
    box-sizing: border-box;
    min-width: 0;                /* allow shrinking—prevents overflow */
  }
}

 .download-card h3 {
   margin: 0 0 10px;
   font-size: 18px;
   font-weight: 700;
   color: #000;
 }

 .device-info {
   color: #666;
   font-size: 14px;
   margin-bottom: 15px;
 }

 .download-btn {
   display: inline-flex;
   /* shrink to fit text+icon */
   align-items: center;
   justify-content: center;
   gap: 8px;
   background: #f0f0f0;
   color: #000;
   text-decoration: none;
   padding: 10px 16px;
   /* balanced horizontal padding */
   border-radius: 999px;
   font-weight: 600;
   white-space: nowrap;
   /* prevent text wrapping */
   transition: transform .15s ease, background .15s ease;
 }

 .download-btn:hover {
   transform: translateY(-2px);
 }

 .android-btn {
   animation: float-android 3s ease-in-out infinite;
 }

 .ios-btn {
   animation: float-ios 3s ease-in-out infinite;
 }

 @keyframes float-android {
   0% {
     transform: translateY(0px);
   }

   50% {
     transform: translateY(-5px);
   }

   100% {
     transform: translateY(0px);
   }
 }

 @keyframes float-ios {
   0% {
     transform: translateY(0px);
   }

   50% {
     transform: translateY(-5px);
   }

   100% {
     transform: translateY(0px);
   }
 }

 .download-btn img {
   width: 24px;
   height: 24px;
 }

 .android-btn {
   background: linear-gradient(180deg, #8eff8c, #00c853);
   color: white;
 }

 .ios-btn {
   background: linear-gradient(180deg, #69c7ff, #0078d4);
   color: white;
 }

 /* Hamburger Menu and More Apps Button */
 .hamburger-menu {
   position: absolute;
   top: 22px;
   left: 20px;
   font-size: 24px;
   color: white;
   cursor: pointer;
   z-index: 100;
   display: block;
   transition: all 0.3s ease;
 }

 .hamburger-menu.active {
   display: none;
 }

 .close-button {
   position: fixed;
   top: 22px;
   left: 20px;
   font-size: 24px;
   color: white;
   cursor: pointer;
   z-index: 1001;
   display: none;
   transition: all 0.3s ease;
 }

 .close-button.active {
   display: block;
 }

 /* Sidebar Menu */
 .sidebar {
   position: fixed;
   top: 0;
   left: -280px;
   width: 280px;
   height: 100%;
   background: #121212;
   z-index: 999;
   transition: all 0.3s ease;
   box-shadow: 2px 0 5px rgba(0, 0, 0, 0.5);
   overflow-y: auto;
 }

 .sidebar.active {
   left: 0;
 }

 .sidebar-header {
   padding: 20px 15px;
   background: #0a0a0a;
   border-bottom: 1px solid #222;
 }

 .sidebar-header img {
   width: 150px;
   display: block;
   margin: 0 auto;
 }

 .sidebar-menu ul {
   list-style: none;
   padding: 0;
   margin: 0;
 }

 .sidebar-menu li {
   padding: 0;
   margin: 0;
   border-bottom: 1px solid #222;
 }

 .sidebar-menu a {
   display: block;
   padding: 15px 20px;
   color: #e9eef2;
   text-decoration: none;
   transition: all 0.2s ease;
 }

 .sidebar-menu a:hover {
   background: #1a1a1a;
   padding-left: 25px;
 }

 /* Overlay */
 .overlay {
   position: fixed;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   background: rgba(0, 0, 0, 0.7);
   z-index: 98;
   opacity: 0;
   visibility: hidden;
   transition: all 0.3s ease;
 }

 .overlay.active {
   opacity: 1;
   visibility: visible;
 }

 .more-apps-button {
   display: none;
   position: fixed;
   bottom: 20px;
   left: 50%;
   transform: translateX(-50%);
   background: linear-gradient(180deg, #ffcc33, #ff9900);
   color: white;
   padding: 10px 20px;
   border-radius: 30px;
   font-weight: bold;
   text-align: center;
   box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
   z-index: 100;
   animation: pulse-more-apps 2s infinite;
   text-decoration: none;
 }

 @keyframes pulse-more-apps {
   0% {
     box-shadow: 0 0 0 0 rgba(255, 153, 0, 0.7);
   }

   70% {
     box-shadow: 0 0 0 10px rgba(255, 153, 0, 0);
   }

   100% {
     box-shadow: 0 0 0 0 rgba(255, 153, 0, 0);
   }
 }

 /* Responsive */
 @media (max-width:780px) {
   .download-btn {
     padding: 8px 12px;
     /* reduce button padding */
     font-size: 12px;
     /* smaller text */
     /* tighter spacing */
   }

   .download-btn img {
     width: 20px;
     /* smaller icon */
     height: 20px;
   }

   .games {
     grid-template-columns: repeat(3, 1fr);
     gap: 10px;
   }
 }

 @media (max-width:520px) {
   .hamburger-menu {
     display: none;
   }

   .more-apps-button {
     display: block;
   }

   .sidebar {
     width: 70%;
     left: -100%;
   }

   .games {
     grid-template-columns: repeat(3, 1fr);
     gap: 8px;
   }

   .download-container {
     gap: 10px;
   }

   .card {
     padding: 10px 5px;
   }

   .card .icon img {
     width: 60px;
     height: 60px;
     object-fit: contain;
     object-position: center;
   }

   .card b {
     font-size: 12px;
     margin-top: 2px;
   }

   .slide {
     padding-top: 56%
   }

   .carousel-slide img {
     object-position: center;
   }

   .carousel-wrapper {
     padding-bottom: 56%;
   }
 }

 /* ===== Reviews section (responsive) ===== */
:root{
  --reviews-bg:#f6f7fb;
  --reviews-panel:#ffffff;
  --reviews-text:#0f172a;       /* slate-900 */
  --reviews-muted:#64748b;      /* slate-500 */
  --reviews-line:#e5e7eb;       /* slate-200 */
  --reviews-accent:#7c3aed;     /* violet-600 */
}

/* page/container helpers (safe) */
.container{ max-width:1100px; margin:0 auto; padding-inline:clamp(12px,4vw,24px); }

.reviews-wrap { background: var(--reviews-bg); }
.reviews-card {
  background: var(--reviews-panel);
  border: 1px solid var(--reviews-line);
  border-radius: 24px;
  box-shadow: 0 6px 14px rgba(15,23,42,.06);
  overflow: hidden;
}

/* tighter padding on phones; more on larger screens */
.reviews-section { padding:16px; }
@media (min-width:480px){ .reviews-section{ padding:22px; } }
@media (min-width:860px){ .reviews-section{ padding:28px; } }

.reviews-title {
  margin:16px 0 16px;
  font-weight:800;
  color:var(--reviews-text);
  font-size:clamp(20px, 2.8vw, 28px);
}

.reviews-grid {
  display:grid; gap:18px;
  grid-template-columns: 1fr;              /* phone: single column */
  margin-bottom: 10px;
}
@media (min-width:860px){
  .reviews-grid{ grid-template-columns: 1fr 2fr; gap:24px; } /* desktop split */
}

.reviews-avg {
  font-weight:800; line-height:1; color:var(--reviews-text);
  font-size:clamp(36px, 8vw, 56px);        /* scales nicely on phones */
}
.reviews-muted { color:var(--reviews-muted); font-size:12px }

/* bars */
.reviews-bar-row{ display:flex; align-items:center; gap:10px }
.reviews-bar{ flex:1; height:10px; border-radius:999px; background:#e9eef5; position:relative; overflow:hidden }
.reviews-bar>span{ position:absolute; inset:0 auto 0 0; background:var(--reviews-accent); width:0 }
@media (min-width:480px){ .reviews-bar{ height:12px; } }

/* divider */
.reviews-divider{ height:1px; background:var(--reviews-line); }

/* review items */
.review-item{
  width: 100%;
  border:1px solid var(--reviews-line);
  border-radius:16px;
  padding:14px;
  background:#fff;
}
@media (min-width:480px){ .review-item{ padding:18px; } }
@media (min-width:860px){ .review-item{ padding:20px; } }

.review-row{ display:flex; gap:12px }
.review-avatar{ width:40px; height:40px; border-radius:50%; object-fit:cover }
@media (min-width:480px){ .review-avatar{ width:44px; height:44px; } }

.review-head{ display:flex; justify-content:space-between; gap:10px; align-items:flex-start; flex-wrap:wrap }
.review-author{ font-weight:700; color:var(--reviews-text) }
.review-time{ color:var(--reviews-muted); font-size:12px }
.review-text{ margin-top:6px; line-height:1.6; color:#334155; font-size:14px }

/* thumbnails: grid on desktop, swipe on mobile */
.review-thumbs{
  margin-top:10px;
  display:flex; gap:8px;
  overflow-x:auto; scroll-snap-type:x mandatory; padding-bottom:2px;
}
.review-thumbs img{
  width:76px; height:76px; object-fit:cover; border-radius:12px; flex:0 0 auto; scroll-snap-align:start;
}
@media (min-width:640px){
  .review-thumbs{ display:grid; grid-template-columns:repeat(4,1fr); overflow:visible; }
  .review-thumbs img{ width:100%; height:80px; }
}

/* stars (fractional fill) */
.stars{ display:inline-flex; position:relative; line-height:0; vertical-align:middle }
.stars svg{ width:clamp(16px, 4.3vw, 20px); height:auto }
.stars .empty{ color:#cbd5e1 }
.stars .fill{ color:var(--reviews-accent); position:absolute; left:0; top:0; overflow:hidden; white-space:nowrap }
.rating-badge{ font-weight:700; margin-right:6px; color:var(--reviews-text) }

/* === Reviews: Dark / No-Card mode === */
.reviews-wrap.reviews-dark{             /* no extra gray/white box */
  position: relative; z-index: 2;
  background: transparent; padding: 0;
}
.reviews-inner{                         /* nice centered width + padding */
  width: min(100%, 880px);
  margin-inline: auto;
  padding: 0px;
}
@media (min-width:640px){ .reviews-inner{ padding:22px; } }
@media (min-width:860px){ .reviews-inner{ padding:28px; } }

/* override light variables just for this section */
.reviews-dark{
  --reviews-bg: transparent;
  --reviews-panel: transparent;
  --reviews-text:#e9eef2;
  --reviews-muted:#aab3bd;
  --reviews-line:#2a2a2a;
  --reviews-accent:#8b5cf6; /* violet */
}

/* use your dark colors */
.reviews-dark .reviews-title,
.reviews-dark .reviews-avg{ color:var(--reviews-text); }
.reviews-dark .reviews-muted{ color:var(--reviews-muted); }
.reviews-dark .reviews-divider{ background:var(--reviews-line); }
.reviews-dark .reviews-bar{ background:#2a2a2a; }
.reviews-dark .review-item{ background:#171717; border-color:#2a2a2a; }
.reviews-dark .review-text{ color:#c7ced6; overflow-wrap:anywhere; }

/* kill the white card shell if present */
.reviews-card{ background:transparent; border:0; border-radius:0; box-shadow:none; }

/* keep thumbnails tidy on phones */
.review-thumbs{ margin-top:10px; display:flex; gap:8px; overflow-x:auto; scroll-snap-type:x mandatory; padding-bottom:2px; }
.review-thumbs img{ width:76px; height:76px; object-fit:cover; border-radius:12px; flex:0 0 auto; scroll-snap-align:start; }
@media (min-width:640px){ .review-thumbs{ display:grid; grid-template-columns:repeat(4,1fr); overflow:visible; }
  .review-thumbs img{ width:100%; height:80px; } }


/* --- FIX: keep review cards inside on phones --- */

/* Allow all nested flex/grid children to shrink */
.reviews-grid,
.reviews-section,
.review-item,
.review-row,
.review-head { min-width: 0; }

/* Keep the card itself fluid */
.review-item { width: 100%; max-width: 100%; }

/* Thumbnails: fluid grid so they never force overflow */
.review-thumbs{
  margin-top: 10px;
  display: grid;                 /* grid on phones too */
  grid-template-columns: repeat(3, 1fr);  /* 3-up on very small screens */
  gap: 8px;
  overflow: visible;             /* no horizontal scroll needed */
}
.review-thumbs img{
  width: 100%;
  height: 70px;                  /* a bit shorter on phones */
  object-fit: cover;
  border-radius: 12px;
}

/* From 480px and up, go 4-up */
@media (min-width:480px){
  .review-thumbs{ grid-template-columns: repeat(4, 1fr); }
  .review-thumbs img{ height: 80px; }
}

/* Make the header wrap cleanly on narrow widths */
.review-head { flex-wrap: wrap; }
.review-head > * { min-width: 0; }

/* If you still see a 1px creep on some devices, you can clip the X overflow without hiding content: */
/* .reviews-inner { overflow-x: clip; } */

/* Mobile: stack avatar above author */
@media (max-width: 479px){
  .review-row{
    flex-direction: column;     /* avatar on top, content below */
    align-items: flex-start;
    gap: 10px;
  }

  /* optional: a touch larger avatar on phones */
  .review-avatar{
    width: 48px;
    height: 48px;
  }
}

/* ---------- A11y helper (for your <caption class="sr-only">) ---------- */
.sr-only {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

/* ---------- Comparison section container ---------- */
.content .comparison {
  display: block;
  margin-top: 28px;
  background: var(--card);
  border: 1px solid #2b2b2b;
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 18px;
}

/* Title in the same gold treatment as your headings */
.content .comparison > h2 {
  margin: 0 0 14px;
  font-size: clamp(1.1rem, 2vw, 1.25rem);
  line-height: 1.2;
  font-weight: 800;
  background: linear-gradient(90deg, var(--gold1), var(--gold2));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* ---------- Table wrapper: prevents bleed on mobile ---------- */
.content .comparison .table-wrap {
  width: 100%;
  max-width: 100%;
  overflow-x: auto;                 /* scroll INSIDE the card if needed */
  -webkit-overflow-scrolling: touch;
  border-radius: calc(var(--radius) - 4px);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.04);
  background: transparent;
}

/* Safety: allow shrinking so children never push outside .content */
.content, .content * { min-width: 0; }

/* ---------- Feature table ---------- */
.feature-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  background: transparent;
  color: var(--text);
  min-width: 680px;                 /* readable columns; wrapper adds scroll on phones */
  font-size: 0.95rem;
}

/* Header cells */
.feature-table thead th {
  position: sticky; top: 0; z-index: 2;
  text-align: left;
  padding: 12px 14px;
  font-weight: 800;
  border-bottom: 1px solid #2a2a2a;
  background: #121212;              /* solid bg behind gradient text for stickiness */
  background-clip: padding-box;
}

/* Gold gradient text for header labels (except first col label on rows) */
.feature-table thead th:not(.first-col) {
  background-image: linear-gradient(90deg, var(--gold1), var(--gold2));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* Cells */
.feature-table th,
.feature-table td {
  padding: 12px 14px;
  vertical-align: top;
  border-bottom: 1px solid #2a2a2a;
  word-wrap: break-word;
  overflow-wrap: anywhere;
}

/* Row header cells (first column) */
.feature-table .first-col {
  font-weight: 700;
  white-space: nowrap;
}

/* Hover row highlight (subtle) */
.feature-table tbody tr:hover {
  background: #171717;
}

/* Rounded corners */
.feature-table thead th:first-child { border-top-left-radius: 10px; }
.feature-table thead th:last-child  { border-top-right-radius: 10px; }
.feature-table tbody tr:last-child td:first-child { border-bottom-left-radius: 10px; }
.feature-table tbody tr:last-child td:last-child  { border-bottom-right-radius: 10px; }

/* Optional: sticky first column for readability during horizontal scroll */
.sticky-first-col .first-col {
  position: sticky; left: 0; z-index: 3;
  background: #101010;              /* distinct but subtle */
  border-right: 1px solid #232323;
}

/* ---------- Badges (Yes / No / Maybe) ---------- */
.badge {
  display: inline;
  padding: 0;                       /* no padding = no pill */
  border: none;
  background: none;
  font-weight: 600;                 /* just make text bold enough */
  font-size: inherit;
  line-height: inherit;
}

/* ---------- Mobile tweaks ---------- */
@media (max-width: 640px) {
  .content .comparison { padding: 14px; }
  .feature-table { min-width: 560px; font-size: 0.92rem; }
  .feature-table th, .feature-table td { padding: 10px 12px; }
  .sticky-first-col .first-col { background: #0f0f0f; }
}

/* Extra small screens: make scroll bars easier to use */
@media (max-width: 420px) {
  .content .comparison .table-wrap { padding-bottom: 2px; }
}

/* ---------- Mobile table column sizing ---------- */
@media (max-width: 640px) {
  .feature-table {
    table-layout: auto;         /* let columns size by content */
    min-width: 720px;           /* increase base scrollable width */
  }

  /* First column (Platform) narrower */
  .feature-table th:first-child,
  .feature-table td:first-child {
    min-width: 100px;
    max-width: 140px;
    white-space: normal;   /* allow wrapping */
  }

  /* Content columns (make them comfortable) */
  .feature-table th,
  .feature-table td {
    min-width: 260px;           /* ensure enough space for text */
    padding: 10px 14px;
  }
}


/* --- Section styling (same card style as before) --- */
.table2 {
  display:block;
  margin-top:28px;
  background:var(--card);
  border:1px solid #2b2b2b;
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  padding:18px;
}

.table2 > h2 {
  margin:0 0 14px;
  font-size:clamp(1.1rem,2vw,1.25rem);
  font-weight:800;
  background:linear-gradient(90deg,var(--gold1),var(--gold2));
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}

/* --- Table wrapper --- */
.table2 .table-wrap {
  width:100%;
  max-width:100%;
  overflow:hidden;   /* no horizontal scroll */
  border-radius:calc(var(--radius) - 4px);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,0.04);
  background:transparent;
}

/* --- Table styling (same as previous design) --- */
.benefit-table {
  width:100%;
  border-collapse:separate;
  border-spacing:0;
  background:transparent;
  color:var(--text);
  font-size:0.95rem;
}

.benefit-table thead th {
  text-align:left;
  font-weight:800;
  padding:12px 14px;
  border-bottom:1px solid #2a2a2a;
  background:#121212;
  background-image:linear-gradient(90deg,var(--gold1),var(--gold2));
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}

.benefit-table th,
.benefit-table td {
  padding:12px 14px;
  border-bottom:1px solid #2a2a2a;
  vertical-align:top;
  overflow-wrap:anywhere;
  word-break:break-word;
}

.benefit-table .first-col {
  color:#f5f5f5;
  font-weight:700;
  width:28%;
}

/* Hover highlight */
.benefit-table tbody tr:hover { background:#171717; }

/* Rounded corners */
.benefit-table thead th:first-child{border-top-left-radius:10px;}
.benefit-table thead th:last-child {border-top-right-radius:10px;}
.benefit-table tbody tr:last-child td:first-child{border-bottom-left-radius:10px;}
.benefit-table tbody tr:last-child td:last-child {border-bottom-right-radius:10px;}

/* --- Mobile: stack rows into cards, no scroll --- */
@media (max-width:640px){
  .benefit-table thead{ display:none; }

  .benefit-table tbody tr{
    display:block;
    background:#101010;
    border:1px solid #2b2b2b;
    border-radius:12px;
    padding:10px 12px;
    margin-bottom:12px;
    box-shadow:var(--shadow);
  }

  .benefit-table tbody th.first-col{
    display:block;
    padding:6px 0 4px;
    margin:0 0 6px 0;
    border:none;
    font-size:1rem;
    line-height:1.25;
    color:#ffffff;
  }

  .benefit-table tbody td{
    display:block;
    padding:0;
    border:none;
    color:var(--text);
    opacity:.95;
  }
}


@media (max-width:640px){
  .table2 .benefit-table tbody th.first-col {
    width: 100% !important;   /* make it span the full card width */
    display: block;
    text-align: center;
  }

  .table2 .benefit-table tbody td {
    width: 100% !important;   /* details also take full width */
    display: block;
    text-align: justify;
  }
}

.image {
  display: flex;
  justify-content: center;   /* centers image horizontally */
  align-items: center;       /* vertical centering if you give a fixed height */
  margin: 16px 0;            /* spacing above and below */
}

/* --- Table3 container (same card style) --- */
.table3 {
  display:block;
  margin-top:28px;
  background:var(--card);
  border:1px solid #2b2b2b;
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  padding:18px;
}

.table3 > h2 {
  text-align: center;
  margin:0 0 14px;
  font-size:clamp(1.1rem,2vw,1.25rem);
  font-weight:800;
  background:linear-gradient(90deg,var(--gold1),var(--gold2));
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}

/* --- Table wrapper --- */
.table3 .table-wrap {
  width:100%;
  max-width:100%;
  overflow-x:auto;   /* allow scroll if content wider than screen */
  border-radius:calc(var(--radius) - 4px);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,0.04);
  background:transparent;
}

/* --- Simple table styling --- */
.simple-table {
  width:100%;
  border-collapse:separate;
  border-spacing:0;
  background:transparent;
  color:var(--text);
  font-size:0.95rem;
}

.simple-table thead th {
  text-align:center;
  font-weight:800;
  padding:12px 14px;
  border-bottom:1px solid #2a2a2a;
  background:#121212;
  background-image:linear-gradient(90deg,var(--gold1),var(--gold2));
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}

.simple-table th,
.simple-table td {
  text-align: center;
  padding:12px 14px;
  border-bottom:1px solid #2a2a2a;
  vertical-align:top;
  overflow-wrap:anywhere;
  word-break:break-word;
}

.simple-table th {
  color:#f5f5f5;
  font-weight:700;
  width:28%;
}

/* Hover highlight */
.simple-table tbody tr:hover { background:#171717; }

/* Rounded corners */
.simple-table thead th:first-child{border-top-left-radius:10px;}
.simple-table thead th:last-child {border-top-right-radius:10px;}
.simple-table tbody tr:last-child td:first-child{border-bottom-left-radius:10px;}
.simple-table tbody tr:last-child td:last-child {border-bottom-right-radius:10px;}