/* Theme tokens */
:root{
  --cl-accent: #ff3f9e;
  --cl-accent-rgb: 255,63,158;
  --cl-accent-2: #905cff;
  --cl-accent-2-rgb: 144,92,255;

  --cl-bg-0: #0a0a0f;
  --cl-bg-1: #0e0d13;
  --cl-bg-2: #161420;
  --cl-card: rgba(18,16,28,.72);
  --cl-border: rgba(255,255,255,.06);
  --cl-border-rgb: 255,255,255;

  --glow: 0 8px 26px rgba(var(--cl-accent-rgb),.24);
  --glow-soft: 0 6px 18px rgba(var(--cl-accent-rgb),.18);
  --ring: 0 0 0 1px rgba(var(--cl-accent-rgb),.32);
}

/* Background */
body{
  background:
    radial-gradient(900px 600px at 15% 10%, rgba(var(--cl-accent-rgb),.10), transparent 60%),
    radial-gradient(900px 600px at 85% 90%, rgba(var(--cl-accent-2-rgb),.10), transparent 60%),
    var(--cl-bg-0) !important;
}

/* Glass navbar */
.navbar{
  position: sticky; top:0; z-index:1030;
  background: rgba(10,10,15,.72);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--cl-border);
}
.navbar .nav-link{ color:#d9dbe1; }
.navbar .nav-link:hover{ color:var(--cl-accent); }
.navbar .navbar-brand img{ filter: drop-shadow(0 4px 12px rgba(var(--cl-accent-rgb),.24)); }

/* Hero */
.hero{ background: none; }
.hero .content h1{
  line-height:1.05;
  letter-spacing:.02em;
  background: linear-gradient(180deg,#fff 0%, #cdd0ff 55%, #9aa0ff 100%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
  text-shadow: 0 10px 40px rgba(0,0,0,.55);
}
.hero .content p{ color:#c7c9d3; }
.hero .content .stats{ background: rgba(255,255,255,.04); border:1px solid var(--cl-border); box-shadow: var(--glow-soft); }

/* Buttons */
.btn{ border-radius: .75rem }
.btn-primary{ box-shadow: var(--glow); }
.btn-outline-primary{ box-shadow: var(--ring); }
.btn-primary:hover, .btn-outline-primary:hover{ transform: translateY(-1px); }

/* Discord / Telegram promo buttons */
a.btn.discord, .discord.btn{
  border:1px solid rgba(88,101,242,.6)!important;
  color:#dfe2ff!important; background: rgba(88,101,242,.08)!important;
  box-shadow: 0 8px 24px rgba(88,101,242,.18);
}
a.btn.telegram, .telegram.btn{
  border:1px solid rgba(0,170,234,.6)!important;
  color:#dff8ff!important; background: rgba(0,170,234,.10)!important;
  box-shadow: 0 8px 24px rgba(0,170,234,.18);
}

/* Cards general */
.bg-block-primary, .bg-block-secondary, .products .card, .testimonial,
.cart .product, .cart .form{
  background: var(--cl-card) !important;
  border: 1px solid var(--cl-border) !important;
  box-shadow: 0 18px 60px rgba(0,0,0,.45);
}

/* Section headers */
.section-title{ gap:.75rem; }
.section-title h1,.section-title h2{
  font-weight:800;
  letter-spacing:.01em;
}
.section-subtitle { color:#a8adc0; }
.section-title p{ color:#9aa0b6; }

/* Product grid cards */
.products .card{
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
  border-radius: 1rem;
}
.products .card:hover{
  transform: translateY(-3px);
  border-color: rgba(var(--cl-accent-rgb),.35) !important;
  box-shadow: var(--glow);
}
.products .card .card-img-top{
  background: linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02));
  border-top-left-radius: 1rem;
  border-top-right-radius: 1rem;
}
.products .card .card-img-top .overlay{ opacity:1; bottom:0; padding:.75rem }
.products .card .card-title{ font-weight:700; }
.products .card .info{ color:#bfc3d4 }
.products .card .card-img-top .badges div{
  background: linear-gradient(180deg, rgba(var(--cl-accent-rgb),.95), rgba(var(--cl-accent-2-rgb),.95));
  box-shadow: var(--glow-soft);
}

/* CTA rows (Support/Quality/Ease) look — tighter + glow headline */
.features .list .feature{
  background: var(--cl-card);
  border:1px solid var(--cl-border);
}
.features .list .feature .title{
  color:#fff;
  text-shadow: 0 6px 18px rgba(0,0,0,.4);
}
.features .list .feature .description{ color:#aeb2c4 }

/* FAQ / Support page */
.faq .accordion-item{
  border:1px solid var(--cl-border);
  background: var(--cl-card);
  box-shadow: 0 10px 26px rgba(0,0,0,.35);
}
.faq .accordion-button{
  color:#e9ecff;
  font-weight:600;
}
.faq .accordion-button:not(.collapsed){ box-shadow: inset 0 0 0 1px rgba(var(--cl-accent-rgb),.35); }

/* Guide lists / side menu */
.list-group{
  --bs-list-group-color:#cfd3e6;
  --bs-list-group-bg: rgba(18,16,28,.55);
  --bs-list-group-border-color: var(--cl-border);
  --bs-list-group-active-bg: linear-gradient(180deg, rgba(var(--cl-accent-rgb),.85), rgba(var(--cl-accent-2-rgb),.85));
  --bs-list-group-active-border-color: rgba(var(--cl-accent-rgb),.6);
}

/* Social blocks */
.socials{ background: transparent }
.socials .list .social{
  background: var(--cl-card);
  border:1px solid var(--cl-border);
}
.socials .list .social:hover{ color:#fff }

/* Footer */
footer.footer{
  background: rgba(12,12,18,.8) !important;
  border-top: 1px solid var(--cl-border) !important;
}

/* Pricing chips / badges */
.badge, .cart-addon-badge{
  border:1px solid rgba(var(--cl-accent-rgb),.35)!important;
  background: rgba(var(--cl-accent-rgb),.10)!important;
  color:#ffd9eb!important;
}

/* Notification popup polish */
.notification-content{
  background: var(--cl-card);
  border-color: var(--cl-border);
  box-shadow: var(--glow-soft);
}

/* Currency selector refinement */
.currency-selector .symbol{
  color:#ffe2f2 !important;
  border:1px solid rgba(var(--cl-accent-rgb),.35);
  background: rgba(var(--cl-accent-rgb),.10);
}

/* Tighter typography */
h1,h2,h3{ letter-spacing:.01em }
p{ color:#c9ccda }

/* Subtle link underline on hover sitewide */
a:hover{ text-decoration: underline }

/* Optional starfield overlay (uses your existing .bg-image hook) */
.bg-image{
  background-image:
    radial-gradient(1px 1px at 20% 30%, rgba(255,255,255,.25) 40%, transparent 41%),
    radial-gradient(1px 1px at 70% 80%, rgba(255,255,255,.2) 40%, transparent 41%),
    radial-gradient(1px 1px at 85% 20%, rgba(255,255,255,.18) 40%, transparent 41%);
  opacity:.22;
}

/* Compact product “Buy” buttons inside cards */
.products .card .overlay .btn{
  border-radius:.6rem;
  font-weight:700;
}

/* Download/Products big cards (guide pages) */
.card.shadow-lg, .status-card{
  background: var(--cl-card);
  border:1px solid var(--cl-border);
}

/* Tables and pagination polish */
.table{ border-color: var(--cl-border); }
.pagination{ --bs-pagination-bg: rgba(255,255,255,.02); }

/* Small glow focus ring everywhere */
.form-control:focus, .form-select:focus, .choices__inner:focus{
  box-shadow: 0 0 0 .2rem rgba(var(--cl-accent-rgb),.25) !important;
  border-color: rgba(var(--cl-accent-rgb),.6) !important;
}

/* Hero fake-searchbar accent */
.hero .fake-searchbar input{ border:1px solid var(--cl-border); }
.hero .fake-searchbar input:focus{ border-color: rgba(var(--cl-accent-rgb),.5); box-shadow: var(--glow-soft); }

/* Card radius consistency */
.products .card, .testimonial, .status-card, .faq .accordion-item, .notification-content{
  border-radius: 14px;
}

/* Slightly larger nav spacing on desktop */
@media (min-width: 992px){
  .navbar .navbar-collapse .navbar-nav{ gap:2rem }
}

/* Tighten product grid gutters on xl for stronger blocks */
@media (min-width: 1200px){
  .products .row{ --bs-gutter-x: 2rem }
}

/* --- Solid black hero, blue heading --- */
.bg-image{ display:none !important; }

.hero{
  min-height:60vh;
  background:#000 !important;
  padding:6rem 2rem;
}
.hero .container{ padding:0; }
.hero .content{ max-width:900px; background:transparent; }

.hero .content h1{
  margin:0 0 .75rem 0;
  font-weight:900;
  font-size:clamp(3rem,8vw,6rem);
  letter-spacing:.02em;
  color:#5cc6ff;
  text-shadow:0 10px 40px rgba(0,153,255,.35), 0 0 24px rgba(0,153,255,.45);
}

.hero .content .tagline{
  font-size:clamp(1rem,2.1vw,1.25rem);
  color:#b9d8ff;
  opacity:.95;
}

/* hide extra hero widgets */
.hero .fake-searchbar,
.hero .content .stats{ display:none !important; }

/* ==== HOME POLISH / GRID FIX ==== */

/* section rhythm */
.py-20, .cta-text-center .content, .socials, .features { padding-top: 4rem; padding-bottom: 4rem; }
.section-title { margin-bottom: 1.25rem; }
.section-title h1, .section-title h2 { font-weight: 800; letter-spacing:.01em; }
.section-title::after{
  content:""; display:block; width:72px; height:2px; margin:.75rem 0 0 0;
  background: linear-gradient(90deg, rgba(var(--bs-primary-rgb),.9), rgba(144,92,255,.7));
  border-radius:2px;
}

/* hero headline refinement */
.hero{ padding-top: 5rem; padding-bottom: 4rem; }
.hero .content h1{ text-shadow: 0 16px 60px rgba(0,153,255,.25), 0 0 36px rgba(0,153,255,.40); }
.hero .content .tagline{ opacity:.92 }

/* ===== Products grid: force balanced rows ===== */
.products .row{
  display:grid !important;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 22px;
}
.products .row > [class*="col"]{ width:100% !important; padding:0 !important; }

/* Card layout */
.products .card{
  height:100%; display:flex; flex-direction:column;
  border-radius:14px; border:1px solid rgba(255,255,255,.06);
  background: radial-gradient(110% 140% at 0% 0%, rgba(255,255,255,.02), transparent 70%), var(--cl-card);
  box-shadow: 0 12px 40px rgba(0,0,0,.45);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.products .card:hover{ transform: translateY(-4px); border-color: rgba(var(--bs-primary-rgb),.35); box-shadow: 0 18px 60px rgba(0,0,0,.55), 0 10px 30px rgba(var(--bs-primary-rgb),.18); }

.products .card .card-img-top{
  position:relative; aspect-ratio:16/9; background: rgba(255,255,255,.03);
  border-top-left-radius:14px; border-top-right-radius:14px;
}
.products .card .card-img-top::after{
  content:""; position:absolute; inset:0;
  background: linear-gradient(180deg, transparent 70%, rgba(0,0,0,.18));
  border-top-left-radius:14px; border-top-right-radius:14px;
  pointer-events:none;
}
.products .card .card-img-top img, .products .card .card-img-top svg{ object-fit:cover; }

.products .card .overlay{ position:absolute; left:0; right:0; bottom:10px; padding:0 .75rem; opacity:1; }
.products .card .overlay .btn{
  width:100%; border-radius:.6rem; font-weight:700;
  background: linear-gradient(180deg, rgba(var(--bs-primary-rgb),.95), rgba(144,92,255,.95));
  border:0; box-shadow: 0 8px 24px rgba(var(--bs-primary-rgb),.25);
}
.products .card .overlay .btn:hover{ filter:brightness(1.06); transform: translateY(-1px); }

.products .card .card-body{ padding: .85rem .9rem 1rem .9rem; display:flex; flex-direction:column; gap:.2rem; }
.products .card .card-title{ font-size:1.05rem; font-weight:700; margin: .2rem 0 0 0; }
.products .card .info{ color:#c8cbe0; font-size:.875rem; margin:.25rem 0 .35rem 0; }
.products .card .info .price{ font-weight:600; }
.products .card .info .stock-indicator, .products .card .info .stock-unlimited{ opacity:.9; }

/* make “lonely last card” never appear centered small */
@media (min-width: 1200px){
  .products .row{ grid-template-columns: repeat(3, 1fr); }
}

/* ===== Reviews / cards polish ===== */
.testimonial{
  border:1px solid rgba(255,255,255,.06) !important;
  background: linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,.015)) !important;
  box-shadow: 0 12px 40px rgba(0,0,0,.45);
}
.testimonial .header p, .testimonial .content .message{ color:#d3d6e6; }
.testimonial .content .reply{ background: rgba(255,255,255,.03); border:1px solid rgba(255,255,255,.05); }

/* ===== Video block frame ===== */
.text-video-block .video-wrapper{
  padding: .6rem; border-radius:16px;
  background: radial-gradient(160% 120% at 10% 0%, rgba(var(--bs-primary-rgb),.15), transparent 60%), rgba(255,255,255,.03);
  border:1px solid rgba(255,255,255,.06);
  box-shadow: 0 16px 48px rgba(0,0,0,.5);
}

/* ===== Navbar subtle glow + tighter spacing ===== */
.navbar{
  background: rgba(10,10,14,.85) !important;
  backdrop-filter: blur(10px);
  border-bottom:1px solid rgba(255,255,255,.06);
  box-shadow: 0 6px 24px rgba(0,0,0,.35);
}
.navbar .navbar-nav .nav-link{ color:#dfe2ff; }
.navbar .navbar-nav .nav-link:hover{ color: var(--bs-primary); }

/* ===== Footer divider and spacing ===== */
footer.footer{
  border-top: 1px solid rgba(255,255,255,.06)!important;
  background: radial-gradient(120% 140% at 80% 0%, rgba(144,92,255,.12), transparent 55%), var(--bs-gray-bg) !important;
}

/* ===== Buttons refinement sitewide ===== */
.btn{ border-radius:.7rem; }
.btn-outline-primary{
  border-color: rgba(var(--bs-primary-rgb),.45);
  background: rgba(var(--bs-primary-rgb),.08);
  color:#cfe1ff;
}
.btn-outline-primary:hover{ background: rgba(var(--bs-primary-rgb),.18); color:#fff; }

/* ===== Utilities ===== */
.shadow-soft{ box-shadow:0 10px 34px rgba(0,0,0,.45) }
.round-14{ border-radius:14px }

/* ===== undo the line that showed as ______ on headings ===== */
.section-title::after { content: none !important; display: none !important; }

/* ===== hero tweaks (keeps your black backdrop) ===== */
.hero { padding-top: 5rem; padding-bottom: 4rem; }
.hero .content h1 { text-shadow: 0 14px 44px rgba(0,160,255,.28), 0 0 24px rgba(0,160,255,.35); }

/* ===== Products: balanced responsive grid + refined cards ===== */
.products .row{ display:grid !important; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:22px; }
.products .row > [class*="col"]{ width:100% !important; padding:0 !important; }

.products .card{
  height:100%; display:flex; flex-direction:column;
  border-radius:14px; border:1px solid rgba(255,255,255,.06);
  background:
    radial-gradient(110% 140% at 0% 0%, rgba(255,255,255,.02), transparent 70%),
    var(--bs-body-bg);
  box-shadow: 0 12px 40px rgba(0,0,0,.45);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.products .card:hover{
  transform: translateY(-4px);
  border-color: rgba(var(--bs-primary-rgb),.35);
  box-shadow: 0 18px 60px rgba(0,0,0,.55), 0 10px 30px rgba(var(--bs-primary-rgb),.18);
}

.products .card .card-img-top{ position:relative; aspect-ratio:16/9; background:rgba(255,255,255,.03); border-top-left-radius:14px; border-top-right-radius:14px; }
.products .card .card-img-top img, .products .card .card-img-top svg{ object-fit:cover; border-top-left-radius:14px; border-top-right-radius:14px; }
.products .card .card-img-top::after{ content:""; position:absolute; inset:0; background:linear-gradient(180deg,transparent 70%,rgba(0,0,0,.18)); border-top-left-radius:14px; border-top-right-radius:14px; pointer-events:none; }

.products .card .overlay{ position:absolute; left:0; right:0; bottom:10px; padding:0 .75rem; opacity:1; }
.products .card .overlay .btn{
  width:100%; border-radius:.6rem; font-weight:700; border:0;
  background:linear-gradient(180deg, rgba(var(--bs-primary-rgb),.95), rgba(144,92,255,.95));
  box-shadow:0 8px 24px rgba(var(--bs-primary-rgb),.25);
}
.products .card .overlay .btn:hover{ filter:brightness(1.06); transform:translateY(-1px); }

.products .card .card-body{ padding:.85rem .9rem 1rem; display:flex; flex-direction:column; gap:.2rem; }
.products .card .card-title{ font-size:1.05rem; font-weight:700; margin:.2rem 0 0; }
.products .card .info{ color:#c8cbe0; font-size:.875rem; margin:.25rem 0 .35rem; }

/* force 3+2 on wide screens (prevents 4+1) */
@media (min-width:1200px){ .products .row{ grid-template-columns:repeat(3,1fr); } }

/* ===== Reviews polish ===== */
.testimonial{ border:1px solid rgba(255,255,255,.06)!important; background:linear-gradient(180deg,rgba(255,255,255,.02),rgba(255,255,255,.015))!important; box-shadow:0 12px 40px rgba(0,0,0,.45); }
.testimonial .content .message{ color:#d3d6e6; }

/* ===== Navbar / footer subtle improvements ===== */
.navbar{ background:rgba(10,10,14,.85)!important; backdrop-filter:blur(10px); border-bottom:1px solid rgba(255,255,255,.06); box-shadow:0 6px 24px rgba(0,0,0,.35); }
.navbar .nav-link:hover{ color:var(--bs-primary); }
footer.footer{ border-top:1px solid rgba(255,255,255,.06)!important; background:radial-gradient(120% 140% at 80% 0%, rgba(144,92,255,.12), transparent 55%), var(--bs-gray-bg)!important; }

/* ===== Showcase split: 3 text bubbles left, video right ===== */
/* Add class 'showcase-split' to that section wrapper (or the block that holds the video row). */
.showcase-split .row{ display:grid; grid-template-columns:1.05fr 1.6fr; align-items:center; gap:28px; }
.showcase-split .video-wrapper{ padding:.6rem; border-radius:16px; background:radial-gradient(160% 120% at 10% 0%, rgba(var(--bs-primary-rgb),.15), transparent 60%), rgba(255,255,255,.03); border:1px solid rgba(255,255,255,.06); box-shadow:0 16px 48px rgba(0,0,0,.5); }
.showcase-split .bubbles{ display:flex; flex-direction:column; gap:14px; }
.showcase-split .bubble{
  padding:14px 16px; border-radius:12px;
  background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.08);
  box-shadow:0 8px 26px rgba(0,0,0,.45);
}
.showcase-split .bubble h4{ margin:0 0 .25rem; font-size:1rem; font-weight:800; }
.showcase-split .bubble p{ margin:0; color:#cfd3ea; font-size:.9rem; line-height:1.35rem; }
@media (max-width:991px){ .showcase-split .row{ grid-template-columns:1fr; } }

/* === One-surface background (kill section-specific grays) === */
body { background: var(--bs-body-bg); }

section.hero,
section.socials,
section.cta-text-image,
section.cta-text-center,
section.features,
section.text-image-block,
section.text-video-block,
section.image-gallery,
section.faq,
section.products,
section.status,
.product-wrapper,
.bg-block-primary,
.bg-block-secondary {
  background: var(--bs-body-bg) !important;
  box-shadow: none !important;
}

/* Keep inner cards/panels readable on the dark surface */
.card,
.testimonial,
.products .card,
.status-card,
.notification-content,
.ticket .ticket-input-area {
  background: rgba(255,255,255,0.035) !important;
  border-color: rgba(255,255,255,0.06) !important;
}

/* Showcase split (video + bubbles) stays seamless */
.showcase-split .bubbles .bubble {
  background: rgba(255,255,255,0.035);
  border: 1px solid rgba(255,255,255,0.06);
}

/* Reviews row spacing tight on unified surface */
.reviews,
#reviews,
section.reviews { background: transparent !important; }

/* Footer matches page */
footer.footer { background: var(--bs-body-bg) !important; border-top-color: rgba(255,255,255,0.06) !important; }

/* Unify all page backgrounds to one dark surface */
:root{
  --bs-gray-bg: var(--bs-body-bg) !important;
  --bs-gray-bg-rgb: var(--bs-body-bg-rgb) !important;
}

/* Kill any leftover section backgrounds */
.bg-gray,
.bg-block-primary,
.bg-block-secondary,
section,
main,
.footer,
.products,
.reviews,
#products,
#reviews {
  background: var(--bs-body-bg) !important;
  box-shadow: none !important;
}

/* Keep cards readable on the unified surface */
.card,
.products .card,
.testimonial,
.status-card,
.notification-content {
  background: rgba(255,255,255,0.035) !important;
  border-color: rgba(255,255,255,0.06) !important;
}

/* Video/text block stays seamless */
.text-video-block .bubble,
.showcase-split .bubbles .bubble {
  background: rgba(255,255,255,0.035) !important;
  border: 1px solid rgba(255,255,255,0.06) !important;
}

/* === Unify PRODUCTS page background to the site dark === */
:root{
  /* Theme secondary -> body */
  --cl-background-secondary: var(--bs-body-bg) !important;
  --cl-background-secondary-rgb: var(--bs-body-bg-rgb) !important;

  /* Bootstrap gray -> body */
  --bs-gray-bg: var(--bs-body-bg) !important;
  --bs-gray-bg-rgb: var(--bs-body-bg-rgb) !important;
}

/* Catch all product listing/detail wrappers */
.page-products,
#products,
[id*="products"],
[class*="products"],
.shop,
.shop-wrapper,
.products {
  background: var(--bs-body-bg) !important;
}

/* Nuke section-level gray blocks inside Products */
.page-products .bg-gray,
.page-products .bg-block-primary,
.page-products .bg-block-secondary,
#products .bg-gray,
#products .bg-block-primary,
#products .bg-block-secondary,
.products .bg-gray,
.products section,
.products main {
  background: var(--bs-body-bg) !important;
  box-shadow: none !important;
}

/* Remove any banner/background image on Products */
.page-products .bg-image,
#products .bg-image,
.products .bg-image { display:none !important; }

/* Keep product cards readable on the unified surface */
.products .card,
.page-products .card {
  background: rgba(255,255,255,0.035) !important;
  border-color: rgba(255,255,255,0.06) !important;
}

/* Chips/filters on Products */
.products .chips .btn,
.page-products .chips .btn {
  background: rgba(255,255,255,0.04) !important;
  border-color: rgba(255,255,255,0.06) !important;
}

/* ============== X9 — Unified Dark Theme (lean) ============== */
:root{
  /* Accent (blue) */
  --x9-accent: #5c7cfa;
  --x9-accent-rgb: 92,124,250;

  /* One-surface background (navy/black) */
  --x9-bg: #0b0f1a;
  --x9-bg-rgb: 11,15,26;

  /* Wire to Bootstrap + theme vars */
  --bs-primary: var(--x9-accent);
  --bs-primary-rgb: var(--x9-accent-rgb);
  --bs-body-bg: var(--x9-bg);
  --bs-body-bg-rgb: var(--x9-bg-rgb);
  --bs-gray-bg: var(--x9-bg);
  --bs-gray-bg-rgb: var(--x9-bg-rgb);

  --cl-accent: var(--x9-accent);
  --cl-accent-rgb: var(--x9-accent-rgb);
  --cl-background-primary: var(--x9-bg);
  --cl-background-primary-rgb: var(--x9-bg-rgb);
  --cl-background-secondary: var(--x9-bg);
  --cl-background-secondary-rgb: var(--x9-bg-rgb);
}

/* ---------- One background everywhere ---------- */
html, body, main, section, footer,
.bg-gray, .bg-block-primary, .bg-block-secondary,
.products, .reviews, #products, #reviews,
.page-products, .shop, .shop-wrapper,
.product-wrapper {
  background: var(--bs-body-bg) !important;
  box-shadow: none !important;
}
.bg-image{ display:none !important; } /* kill legacy page banners */

/* ---------- Navbar / Footer (subtle glass) ---------- */
.navbar{
  background: rgba(11,15,26,.85) !important;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(255,255,255,.06);
}
footer.footer{
  background: var(--bs-body-bg) !important;
  border-top: 1px solid rgba(255,255,255,.06) !important;
}

/* ---------- Buttons / focus use blue accent ---------- */
.btn-primary{
  --bs-btn-bg: var(--x9-accent);
  --bs-btn-border-color: var(--x9-accent);
  --bs-btn-hover-bg: var(--x9-accent);
  --bs-btn-hover-border-color: var(--x9-accent);
}
.form-control:focus, .form-select:focus{
  box-shadow: 0 0 0 .2rem rgba(var(--x9-accent-rgb), .25) !important;
  border-color: rgba(var(--x9-accent-rgb), .6) !important;
}

/* ---------- Cards (clean glass) ---------- */
.card, .testimonial, .status-card,
.notification-content, .ticket .ticket-input-area,
.products .card{
  background: rgba(255,255,255,.035) !important;
  border: 1px solid rgba(255,255,255,.06) !important;
  border-radius: 14px;
}

/* ---------- Products grid (balanced, no 4+1) ---------- */
.products .row{
  display:grid !important;
  grid-template-columns: repeat(auto-fit, minmax(260px,1fr));
  gap: 22px;
}
.products .row > [class*="col"]{ width:100% !important; padding:0 !important; }
@media (min-width:1200px){ .products .row{ grid-template-columns: repeat(3,1fr); } }

.products .card{ height:100%; display:flex; flex-direction:column; }
.products .card .card-img-top{
  position:relative; aspect-ratio:16/9;
  background: rgba(255,255,255,.03);
  border-top-left-radius:14px; border-top-right-radius:14px;
}
.products .card .card-img-top img,
.products .card .card-img-top svg{
  object-fit:cover; border-top-left-radius:14px; border-top-right-radius:14px;
}
.products .card .overlay .btn{
  width:100%; border:0; border-radius:.6rem; font-weight:700;
  background: linear-gradient(180deg, rgba(var(--x9-accent-rgb),.95), rgba(var(--x9-accent-rgb),.85));
  box-shadow: 0 8px 24px rgba(var(--x9-accent-rgb),.25);
}

/* ---------- Reviews polish ---------- */
.testimonial .content .message{ color:#d3d6e6; }

/* ---------- Hero (simple, no image) ---------- */
.hero{ background: var(--bs-body-bg) !important; padding: 5rem 0; }
.hero .content h1{
  color:#bcd3ff; font-weight:900;
  text-shadow: 0 14px 44px rgba(var(--x9-accent-rgb),.28), 0 0 24px rgba(var(--x9-accent-rgb),.35);
}

/* ---------- Misc small tweaks ---------- */
.pagination{ --bs-pagination-bg: rgba(255,255,255,.02); }
a:hover{ text-decoration: underline; }

/* --- Hero: readable on blue/navy --- */
.hero .content h1{
  color:#eaf2ff;
  text-shadow:0 10px 36px rgba(80,130,255,.35),0 0 28px rgba(80,130,255,.45);
}
.hero .content p{ color:#cfe1ff; opacity:.95; }

/* --- Split layout (bubbles left, media right) --- */
.showcase-split{ /* reuse for video or image blocks */
  --bubble-bg: rgba(255,255,255,.035);
  --bubble-br: rgba(255,255,255,.06);
}
.showcase-split .row{ display:grid; grid-template-columns:1.05fr 1.6fr; gap:28px; align-items:center; }
.showcase-split .bubbles{ display:flex; flex-direction:column; gap:14px; }
.showcase-split .bubble{
  padding:14px 16px; border-radius:12px;
  background:var(--bubble-bg); border:1px solid var(--bubble-br);
  box-shadow:0 8px 26px rgba(0,0,0,.45);
}
.showcase-split .bubble h4{ margin:0 0 .25rem; font-size:1rem; font-weight:800; color:#e9efff; }
.showcase-split .bubble p{ margin:0; color:#cfd6ee; font-size:.92rem; line-height:1.35rem; }

/* Media (image/video) on the right */
.showcase-split .media-wrap{
  padding:.6rem; border-radius:16px;
  background:radial-gradient(160% 120% at 10% 0%, rgba(var(--bs-primary-rgb),.12), transparent 60%), rgba(255,255,255,.03);
  border:1px solid rgba(255,255,255,.06);
  box-shadow:0 16px 48px rgba(0,0,0,.5);
  max-width:620px; margin-left:auto;
}
.showcase-split.image-slim .media-wrap{ max-width:520px; } /* slightly smaller image variant */
.showcase-split .media-wrap img{ width:100%; height:auto; border-radius:12px; display:block; }

/* Section title contrast on navy */
.section-title h1, .section-title h2{ color:#e9efff; }
@media (max-width: 991px){ .showcase-split .row{ grid-template-columns:1fr; } .showcase-split .media-wrap{ margin:0; } }

/* Text-image split like the video section, but with a larger UI shot */
.ti-split .row{
  display:grid !important;
  grid-template-columns: 1.05fr 1.6fr; /* bigger image */
  align-items:center;
  gap:36px;
}
@media (max-width: 991px){
  .ti-split .row{ grid-template-columns:1fr; }
}

/* Image frame */
.ti-split .ui-shot{
  padding:.75rem;
  border-radius:16px;
  background: rgba(255,255,255,.03);
  border:1px solid rgba(255,255,255,.06);
  box-shadow: 0 24px 72px rgba(0,0,0,.5);
}
.ti-split .ui-shot img{
  width:100%;
  display:block;
  border-radius:12px;
}

/* Bubbles */
.ti-split .bubbles{ display:flex; flex-direction:column; gap:16px; }
.ti-split .bubble{
  padding:16px 18px;
  border-radius:12px;
  background: rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.08);
  box-shadow: 0 14px 40px rgba(0,0,0,.45);
}
.ti-split .bubble h4{ margin:0 0 .25rem; font-weight:800; letter-spacing:.01em; }
.ti-split .bubble p{ margin:0; color:#cfe1ff; opacity:.95; }

/* Slightly stronger hero heading for the blue page */
.hero .content h1{
  color:#cfe3ff; text-shadow:0 14px 44px rgba(0,160,255,.28), 0 0 28px rgba(0,160,255,.35);
}

/* Text+Image → Trigger-style split */
.text-image-block.showcase-split .row{
  display:grid !important;
  grid-template-columns: 42% 58%;
  align-items:center;
  gap:28px;
}
@media (max-width: 991px){
  .text-image-block.showcase-split .row{ grid-template-columns:1fr; gap:18px; }
}

/* Left bubbles */
.text-image-block.showcase-split .bubbles{ display:flex; flex-direction:column; gap:16px; }
.text-image-block.showcase-split .bubble{
  padding:16px 18px;
  border-radius:12px;
  background: rgba(255,255,255,.035);
  border: 1px solid rgba(255,255,255,.06);
  box-shadow: 0 12px 36px rgba(0,0,0,.45);
}
.text-image-block.showcase-split .bubble h4{ margin:0 0 .25rem; font-weight:800; }
.text-image-block.showcase-split .bubble p{ margin:0; opacity:.95; }

/* Right device frame + big image */
.text-image-block.showcase-split .device{
  position:relative;
  max-width: 980px;   /* makes the image BIG like the video */
  margin-left:auto;   /* nudge toward the right edge */
  padding:8px;
  border-radius:16px;
  background: radial-gradient(160% 120% at 10% 0%, rgba(92,198,255,.18), transparent 60%), rgba(255,255,255,.03);
  border:1px solid rgba(255,255,255,.06);
  box-shadow: 0 22px 70px rgba(0,0,0,.55);
}
.text-image-block.showcase-split .device img{
  width:100%;
  height:auto;
  display:block;
  border-radius:12px;
}

/* force 5 cards per row on desktop */
.products.products-5 {
  display: flex;
  flex-wrap: wrap;
}
.products.products-5 > [class^="col"], 
.products.products-5 > [class*=" col"] {
  flex: 0 0 20% !important;
  max-width: 20% !important;
}

/* responsive fallbacks */
@media (max-width: 991.98px) { /* lg- */
  .products.products-5 > [class^="col"],
  .products.products-5 > [class*=" col"] { flex: 0 0 33.333% !important; max-width: 33.333% !important; }
}
@media (max-width: 767.98px) { /* md- */
  .products.products-5 > [class^="col"],
  .products.products-5 > [class*=" col"] { flex: 0 0 50% !important; max-width: 50% !important; }
}
@media (max-width: 575.98px) { /* sm- */
  .products.products-5 > [class^="col"],
  .products.products-5 > [class*=" col"] { flex: 0 0 100% !important; max-width: 100% !important; }
}

/* hero layout */
.section-hero .row{
  align-items:center;              /* vertical align */
  --bs-gutter-x: 1rem;             /* pull columns closer (Bootstrap 5) */
}

/* right column holds the screenshot */
.section-hero .hero-image{
  display:flex;
  justify-content:flex-end;
}

/* make the screenshot bigger and closer to the boxes */
.section-hero .hero-image img{
  max-width:none;
  width:120%;
  transform: translateX(4%) scale(1.1);
  transform-origin: right center;
}

/* normal size on small screens */
@media (max-width: 991.98px){
  .section-hero .row{ --bs-gutter-x: 1.5rem; }
  .section-hero .hero-image img{ width:100%; transform:none; }
}