* { margin:0; padding:0; box-sizing:border-box; }

:root{
  --bg:#000000;
  --panel:#0c0f14;
  --line:rgba(255,255,255,0.10);
  --text:#ffffff;
  --muted:rgba(255,255,255,0.65);

  --accent:#2596be;
  --radius:24px;
  --shadow:0 22px 70px rgba(0,0,0,0.55);
}

html, body{
  background:var(--bg);
  color:var(--text);
  font-family:"Open Sans", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  overflow-x:hidden;
}

.top{ padding:18px 18px 0; }
.backBtn{
  display:inline-flex;
  align-items:center;
  gap:10px;
  text-decoration:none;
  color:rgba(255,255,255,0.88);
  padding:10px 12px;
  border-radius:14px;
  background:rgba(255,255,255,0.04);
  border:1px solid rgba(255,255,255,0.10);
  transition:transform .15s ease, background .15s ease, border-color .15s ease;
}
.backBtn:hover{
  transform:translateY(-1px);
  background:rgba(255,255,255,0.06);
  border-color:rgba(255,255,255,0.16);
}
.backIcon{ font-weight:900; }

.wrap{
  max-width:1100px;
  margin:0 auto;
  padding:18px 18px 36px;
}

.hero{
  margin-top:18px;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:14px;
}
.heroCard{
  width:min(920px, 100%);
  background:linear-gradient(180deg, #000, #000);
  border:1px solid rgba(37,150,190,0.9);
  border-radius:28px;
  padding:26px 22px;
  text-align:center;
  box-shadow:var(--shadow);
}
.heroCard h1{
  font-family:"Montserrat", sans-serif;
  font-weight:800;
  font-size:2rem;
  letter-spacing:0.2px;
}
.heroCard p{
  margin-top:8px;
  color:rgba(255,255,255,0.70);
  line-height:1.6;
}

/* cards grid */
.cards{
  margin-top:22px;
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:16px;
}
.planCard{
  background:linear-gradient(180deg, rgba(255,255,255,0.04), rgba(255,255,255,0.015));
  border:1px solid rgba(255,255,255,0.10);
  border-radius:var(--radius);
  padding:18px;
  box-shadow:0 18px 55px rgba(0,0,0,0.45);
  position:relative;
  overflow:hidden;
}
.planTop{ text-align:center; }
.planName{
  font-family:"Montserrat", sans-serif;
  font-weight:800;
  letter-spacing:1.4px;
  font-size:.88rem;
  color:rgba(255,255,255,0.70);
}
.planPrice{
  margin-top:12px;
  font-family:"Montserrat", sans-serif;
  font-weight:800;
  font-size:2.4rem;
  display:flex;
  align-items:baseline;
  justify-content:center;
  gap:6px;
}
.currency{ font-size:1.2rem; opacity:.85; }
.amountText{ font-size:1rem; opacity:.7; font-weight:800; }
.planSub{
  margin-top:8px;
  color:rgba(255,255,255,0.60);
  font-weight:700;
  letter-spacing:1.2px;
  font-size:.85rem;
}
.features{
  margin-top:16px;
  list-style:none;
  display:grid;
  gap:10px;
  color:rgba(255,255,255,0.72);
  padding:0 2px;
}
.features li{
  padding:10px 12px;
  border-radius:14px;
  background:rgba(255,255,255,0.03);
  border:1px solid rgba(255,255,255,0.08);
}
.features li.muted{ color:rgba(255,255,255,0.55); }

.chooseBtn{
  margin-top:16px;
  width:100%;
  padding:13px 14px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,0.16);
  background:transparent;
  color:#fff;
  font-weight:800;
  cursor:pointer;
  transition:transform .15s ease, background .15s ease, border-color .15s ease;
}
.chooseBtn:hover{
  transform:translateY(-1px);
  background:rgba(255,255,255,0.06);
  border-color:rgba(255,255,255,0.24);
}
.chooseBtn.filled{
  background:rgba(37,150,190,0.95);
  border-color:rgba(37,150,190,0.35);
}
.chooseBtn.filled:hover{
  background:rgba(37,150,190,1);
  border-color:rgba(255,255,255,0.25);
}

/* featured */
.planCard.featured{
  border-color:rgba(37,150,190,0.28);
  box-shadow:0 22px 70px rgba(0,0,0,0.55);
}
.featuredRing{
  position:absolute;
  inset:-120px -120px auto auto;
  width:280px;
  height:280px;
  border-radius:50%;
  background:radial-gradient(circle, rgba(37,150,190,0.9), transparent 60%);
  filter:blur(2px);
}

/* ===== Add-ons ===== */
.addons{ margin-top:22px; }
.addonsHead{ text-align:center; margin-bottom:14px; }
.addonsHead h2{
  font-family:"Montserrat", sans-serif;
  font-weight:800;
  font-size:1.55rem;
}
.addonsHead p{ margin-top:6px; color:rgba(255,255,255,0.65); }

.addonsGrid{
  display:grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap:16px;
}
.addonCard{
  position:relative;
  border-radius: 22px;
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.10);
  box-shadow: 0 22px 70px rgba(0,0,0,0.55);
  padding: 16px;
  overflow:hidden;
}
.addonCard::before{
  content:"";
  position:absolute;
  inset:-140px -140px auto auto;
  width:340px; height:340px;
  background: radial-gradient(closest-side, rgba(37,150,190,0.22), rgba(0,0,0,0) 70%);
  filter: blur(6px);
  opacity:.85;
  pointer-events:none;
}
.addonCard.featured{ border-color: rgba(37,150,190,0.25); }

.addonTop{ display:flex; align-items:baseline; justify-content:space-between; gap:12px; }
.addonTitle{
  font-family:"Montserrat", sans-serif;
  font-weight:900;
  color: rgba(255,255,255,0.92);
}
.addonPrice{
  font-family:"Montserrat", sans-serif;
  font-weight:900;
  font-size:1.6rem;
  color: rgba(255,255,255,0.96);
}
.addonMeta{ margin-top:6px; color: rgba(255,255,255,0.55); font-weight:800; }
.addonList{ list-style:none; margin-top:12px; display:grid; gap:10px; padding-left:0; }
.addonList li{
  padding:10px 12px;
  border-radius: 14px;
  background: rgba(0,0,0,0.22);
  border:1px solid rgba(255,255,255,0.08);
  color: rgba(255,255,255,0.72);
  font-weight:700;
}

.addonBtn{
  width:100%;
  margin-top:14px;
  padding:12px 14px;
  border-radius: 999px;
  border:1px solid rgba(255,255,255,0.16);
  background: rgba(255,255,255,0.02);
  color: rgba(255,255,255,0.92);
  font-weight:900;
  cursor:pointer;
  transition: transform .16s ease, background .16s ease, border-color .16s ease;
}
.addonBtn:hover{
  transform: translateY(-2px);
  background: rgba(255,255,255,0.06);
  border-color: rgba(255,255,255,0.22);
}
.addonBtn.primary{
  background: rgba(37,150,190,0.95);
  border-color: rgba(37,150,190,0.35);
}
.addonBtn.primary:hover{ background: rgba(37,150,190,1); }

.addonsNote{
  margin-top:10px;
  text-align:center;
  color: rgba(255,255,255,0.50);
  line-height:1.6;
}

/* Selection states */
.planCard.is-selected {
  border-color: rgba(37,150,190,0.55);
  box-shadow: 0 0 0 1px rgba(37,150,190,0.35), 0 22px 70px rgba(0,0,0,0.55);
}
.addonCard.is-selected {
  border-color: rgba(37,150,190,0.45);
  box-shadow: 0 0 0 1px rgba(37,150,190,0.22), 0 22px 70px rgba(0,0,0,0.45);
}

/*!* ===== Compare table ===== *!*/
/*.compare{ margin-top:26px; padding-top:6px; }*/
/*.compareHead{ text-align:center; margin-bottom:14px; }*/
/*.compareHead h2{*/
/*  font-family:"Montserrat", sans-serif;*/
/*  font-weight:800;*/
/*  font-size:1.6rem;*/
/*}*/
/*.compareHead p{ margin-top:6px; color:rgba(255,255,255,0.65); }*/

/*.tableWrap{*/
/*  background:rgba(255,255,255,0.03);*/
/*  border:1px solid rgba(255,255,255,0.10);*/
/*  border-radius:var(--radius);*/
/*  overflow:auto;*/
/*  box-shadow:0 18px 55px rgba(0,0,0,0.35);*/
/*}*/
/*.compareTable{*/
/*  width:100%;*/
/*  border-collapse:separate;*/
/*  border-spacing:0;*/
/*  min-width:720px;*/
/*}*/
/*.compareTable thead th{*/
/*  text-align:left;*/
/*  padding:16px 14px;*/
/*  font-family:"Montserrat", sans-serif;*/
/*  font-weight:800;*/
/*  color:rgba(255,255,255,0.90);*/
/*  background:rgba(255,255,255,0.02);*/
/*  border-bottom:1px solid rgba(255,255,255,0.10);*/
/*}*/
/*.compareTable tbody td{*/
/*  padding:14px;*/
/*  border-bottom:1px solid rgba(255,255,255,0.08);*/
/*  color:rgba(255,255,255,0.72);*/
/*}*/
/*.compareTable tbody tr:last-child td{ border-bottom:none; }*/
/*.yes{ color:rgba(255,255,255,0.92); font-weight:900; text-align:center; }*/
/*.no{ color:rgba(255,255,255,0.40); text-align:center; }*/
/*!* =========================*/
/*   MOBILE FIX: SHOW ALL COLUMNS*/
/*   ========================= *!*/
/*@media (max-width: 640px){*/

/*  .tableWrap{*/
/*    overflow: hidden;              !* ✅ no sideways scroll *!*/
/*    border-radius: 18px;*/
/*  }*/

/*  .compareTable{*/
/*    min-width: 0;                  !* ✅ remove the 720px lock *!*/
/*    width: 100%;*/
/*    table-layout: fixed;           !* ✅ force columns to fit screen *!*/
/*  }*/

/*  !* Header cells *!*/
/*  .compareTable thead th{*/
/*    padding: 14px 10px;*/
/*    font-size: .85rem;*/
/*    letter-spacing: .2px;*/
/*    white-space: nowrap;*/
/*  }*/

/*  !* Body cells *!*/
/*  .compareTable tbody td{*/
/*    padding: 14px 10px;*/
/*    font-size: .85rem;*/
/*    line-height: 1.2;*/
/*    white-space: normal;           !* ✅ allow text to wrap *!*/
/*    word-break: break-word;*/
/*  }*/

/*  !* Make first column wider (feature names) *!*/
/*  .compareTable thead th:first-child,*/
/*  .compareTable tbody td:first-child{*/
/*    width: 52%;*/
/*  }*/

/*  !* Other columns share the remaining width evenly *!*/
/*  .compareTable thead th:not(:first-child),*/
/*  .compareTable tbody td:not(:first-child){*/
/*    width: 16%;*/
/*    text-align: center;*/
/*  }*/

/*  !* Yes/No look cleaner on small screens *!*/
/*  .yes, .no{*/
/*    font-size: .95rem;*/
/*    font-weight: 900;*/
/*  }*/
/*}*/
/*!* =========================*/
/*   FIX COMPARE TITLE MOBILE*/
/*   ========================= *!*/

/*@media (max-width: 768px){*/

/*  .compareHead h2{*/
/*    font-size: 1.35rem;   !* smaller title *!*/
/*    line-height: 1.2;*/
/*  }*/

/*  .compareHead p{*/
/*    font-size: .9rem;     !* smaller subtitle *!*/
/*    line-height: 1.4;*/
/*  }*/

/*}*/

     /* ===== Compare table ===== */
   .compare{ margin-top:26px; padding-top:6px; }
.compareHead{ text-align:center; margin-bottom:14px; }
.compareHead h2{
  font-family:"Montserrat", sans-serif;
  font-weight:800;
  font-size:1.6rem;
}
.compareHead p{ margin-top:6px; color:rgba(255,255,255,0.65); }

.tableWrap{
  background:rgba(255,255,255,0.03);
  border:1px solid rgba(255,255,255,0.10);
  border-radius:var(--radius);
  overflow:auto;
  box-shadow:0 18px 55px rgba(0,0,0,0.35);
}
.compareTable{
  width:100%;
  border-collapse:separate;
  border-spacing:0;
  min-width:720px;
}
.compareTable thead th{
  text-align:left;
  padding:16px 14px;
  font-family:"Montserrat", sans-serif;
  font-weight:800;
  color:rgba(255,255,255,0.90);
  background:rgba(255,255,255,0.02);
  border-bottom:1px solid rgba(255,255,255,0.10);
}
.compareTable tbody td{
  padding:14px;
  border-bottom:1px solid rgba(255,255,255,0.08);
  color:rgba(255,255,255,0.72);
}
.compareTable tbody tr:last-child td{ border-bottom:none; }
.yes{ color:rgba(255,255,255,0.92); font-weight:900; text-align:center; }
.no{ color:rgba(255,255,255,0.40); text-align:center; }
/* =========================
   MOBILE FIX: SHOW ALL COLUMNS
   ========================= */
@media (max-width: 640px){

  .tableWrap{
    overflow: hidden;              /* ✅ no sideways scroll */
    border-radius: 18px;
  }

  .compareTable{
    min-width: 0;                  /* ✅ remove the 720px lock */
    width: 100%;
    table-layout: fixed;           /* ✅ force columns to fit screen */
  }

  /* Header cells: allow wrapping so long titles don't overflow */
  .compareTable thead th{
    padding: 14px 10px;
    font-size: .70rem;
    letter-spacing: .2px;
    white-space: normal;           /* allow wrapping on small screens */
    word-break: break-word;
    hyphens: auto;
    line-height: 1.15;
  }

  /* Body cells */
  .compareTable tbody td{
    padding: 14px 10px;
    font-size: .85rem;
    line-height: 1.2;
    white-space: normal;           /* ✅ allow text to wrap */
    word-break: break-word;
  }

  /* Make first column wider (feature names) */
  .compareTable thead th:first-child,
  .compareTable tbody td:first-child{
    width: 52%;
    min-width: 120px;
  }

  /* Other columns share the remaining width evenly; give a sensible min-width */
  .compareTable thead th:not(:first-child),
  .compareTable tbody td:not(:first-child){
    width: 16%;
    min-width: 56px;
    text-align: center;
  }

  /* Yes/No look cleaner on small screens */
  .yes, .no{
    font-size: .95rem;
    font-weight: 900;
  }
}
/* =========================
   FIX COMPARE TITLE MOBILE
   ========================= */

@media (max-width: 768px){

  .compareHead h2{
    font-size: 1.35rem;   /* smaller title */
    line-height: 1.2;
  }

  .compareHead p{
    font-size: .9rem;     /* smaller subtitle */
    line-height: 1.4;
  }

}

/* Footer */
.lux-footer{
  background:#000;
  padding:22px 16px;
  border-top:1px solid rgba(255,255,255,0.08);
}
.lux-footer-inner{
  max-width:1100px;
  margin:0 auto;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  flex-wrap:wrap;
}
.lux-footer-links{
  display:flex;
  align-items:center;
  gap:10px;
  font-size:.9rem;
}
.lux-footer-links a{
  color:rgba(255,255,255,0.75);
  text-decoration:none;
}
.lux-footer-links a:hover{ color:#fff; }
.lux-footer-links span{ color:rgba(255,255,255,0.3); }
.lux-footer-copy{
  font-size:.85rem;
  color:rgba(255,255,255,0.5);
}

@media (max-width: 980px){
  .cards{ grid-template-columns:1fr; }
  .addonsGrid{ grid-template-columns:1fr; }
  .heroCard h1{ font-size:1.65rem; }
}
.addonNote {
  margin-top: 10px;
  padding: 10px 12px;
  background: rgba(37, 150, 190, 0.12);
  border: 1px solid rgba(37, 150, 190, 0.25);
  border-radius: 12px;
  color: rgba(255, 255, 255, 0.80);
  font-size: 0.85rem;
  line-height: 1.4;
  font-weight: 600;
  text-align: center;
}