/* Version Table and Export Button */
.version-table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 16px;
  background: rgba(255,255,255,0.08);
  border-radius: 12px;
  overflow: hidden;
}
.version-table th, .version-table td {
  padding: 12px 16px;
  text-align: left;
  color: #222;
  background: rgba(255,255,255,0.18);
  font-size: 15px;
}
.version-table th {
  background: #ffd700;
  color: #0b74ff;
  font-weight: 900;
}
.version-table tr:nth-child(even) td {
  background: rgba(11,116,255,0.08);
}
.export-btn {
  margin-top: 18px;
  background: #0b74ff;
  color: #fff;
  border: none;
  border-radius: 16px;
  padding: 10px 22px;
  font-size: 15px;
  font-weight: 700;
  box-shadow: 0 4px 18px rgba(11,116,255,0.12);
  cursor: pointer;
  transition: background 0.18s;
}
.export-btn:hover {
  background: #ffd700;
  color: #0b74ff;
}
/* Modal Versioni SynexAI */
.version-modal {
  position: fixed;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  background: rgba(0,0,0,0.55);
  z-index: 2100;
}
.version-modal[aria-hidden="false"] {
  display: flex;
}
.version-panel {
  background: linear-gradient(180deg,#081025 0%,#0b0b0b 60%);
  color: #fff;
  padding: 22px;
  width: 420px;
  max-width: 92%;
  border-radius: 18px;
  box-shadow: 0 30px 80px rgba(0,0,0,0.6);
  position: relative;
  transform: translateY(20px);
  opacity: 0;
  transition: transform .36s cubic-bezier(.2,.9,.2,1),opacity .36s ease;
}
.version-modal.open .version-panel {
  transform: none;
  opacity: 1;
}
.version-close {
  position: absolute;
  right: 10px;
  top: 10px;
  background: transparent;
  border: none;
  color: #bbb;
  font-size: 22px;
  cursor: pointer;
}
.version-panel h2 {
  font-size: 22px;
  margin: 0 0 12px 0;
  font-weight: 900;
  letter-spacing: 0.6px;
  color: #ffd700;
}
.version-content {
  margin-top: 10px;
  color: #fff;
  font-size: 15px;
  line-height: 1.5;
  padding: 0;
}

@media (max-width: 600px) {
  .version-panel {
    padding: 10px 6px;
    border-radius: 16px;
    width: 98vw;
    max-width: 420px;
  }
  .version-table th, .version-table td {
    padding: 8px 6px;
    font-size: 14px;
  }

}
.version-card.selected {
  box-shadow: 0 0 0 4px #ffd700, 0 8px 32px rgba(123,46,255,0.18);
  border: 2px solid #ffd700;
}
.version-card .ripple {
  position: absolute;
  width: 80px;
  height: 80px;
  background: rgba(255,215,0,0.18);
  border-radius: 50%;
  transform: translate(-50%, -50%) scale(0);
  animation: rippleAnim 0.5s linear;
  pointer-events: none;
  z-index: 2;
}
@keyframes rippleAnim {
  to {
    transform: translate(-50%, -50%) scale(1.2);
    opacity: 0;
  }
}
/* Sidebar Versioni SynexAI */
.version-sidebar {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(0);
  width: 340px;
  max-width: 92vw;
  height: auto;
  min-height: 220px;
  background: rgba(20, 20, 30, 0.98);
  box-shadow: 0 8px 40px rgba(0,0,0,0.22);
  z-index: 2200;
  transition: transform 0.35s cubic-bezier(.68,-0.55,.27,1.55), opacity 0.25s;
  display: flex;
  flex-direction: column;
  border-radius: 22px;
  opacity: 0;
}
.version-sidebar.active {
  transform: translate(-50%, -50%) scale(1);
  opacity: 1;
}
.sidebar-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 28px 24px 18px 24px;
  font-size: 28px;
  font-weight: 900;
  color: #ffd700;
  background: linear-gradient(90deg, #0b74ff22 0%, #ffd70022 100%);
  border-bottom: 3px solid #0b74ff;
  letter-spacing: 1px;
  box-shadow: 0 2px 12px rgba(11,116,255,0.08);
  z-index: 2;
}
.close-sidebar {
  background: none;
  border: none;
  color: #fff;
  font-size: 24px;
  cursor: pointer;
}
/* Versioni come card/quadrati animati */
.version-list {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  padding: 32px 20px 18px 20px;
  margin: 0;
  justify-content: flex-start;
}
.version-card {
  background: linear-gradient(135deg, #0b74ff 60%, #ffd700 100%);
  color: #fff;
  border-radius: 16px;
  box-shadow: 0 4px 18px rgba(11,116,255,0.12);
  padding: 18px 22px;
  font-size: 18px;
  font-weight: 700;
  display: flex;
  align-items: center;
  gap: 12px;
  cursor: pointer;
  transition: transform 0.18s, box-shadow 0.18s, background 0.18s;
  border: none;
  outline: none;
  min-width: 90px;
  min-height: 60px;
  position: relative;
}
.version-card:hover {
  transform: scale(1.07) translateY(-4px);
  box-shadow: 0 8px 32px rgba(123,46,255,0.18);
  background: linear-gradient(135deg, #ffd700 60%, #0b74ff 100%);
}
.version-card .version-icon {
  font-size: 24px;
  color: #fff;
  opacity: 0.85;
}
.version-card .version-label {
  font-size: 18px;
  font-weight: 900;
  letter-spacing: 0.5px;
}
.open-sidebar {
  position: fixed;
  top: 24px;
  left: 24px;
  z-index: 1300;
  background: #0b74ff;
  color: #fff;
  border: none;
  border-radius: 24px;
  padding: 10px 22px;
  font-size: 16px;
  font-weight: 700;
  box-shadow: 0 4px 18px rgba(11,116,255,0.12);
  cursor: pointer;
  transition: background 0.18s;
}
.open-sidebar:hover {
  background: #7b2eff;
}

/* Bottone Termini e Policy */
.terms-btn {
  position: fixed;
  right: 24px;
  bottom: 24px;
  z-index: 1100;
  background: #0b74ff;
  color: #fff;
  border: none;
  border-radius: 24px;
  padding: 12px 28px;
  font-size: 16px;
  font-weight: 700;
  box-shadow: 0 4px 18px rgba(11,116,255,0.12);
  cursor: pointer;
  transition: background 0.18s;
}
.terms-btn:hover {
  background: #7b2eff;
}

/* Modal Termini e Policy */
.terms-modal {
  position: fixed;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  background: rgba(0,0,0,0.6);
  z-index: 2000;
}
.terms-modal[aria-hidden="false"] {
  display: flex;
}
.terms-panel {
  background: linear-gradient(180deg,#081025 0%,#0b0b0b 60%);
  color: white;
  padding: 28px;
  width: 420px;
  max-width: 92%;
  border-radius: 18px;
  box-shadow: 0 30px 80px rgba(0,0,0,0.6);
  position: relative;
  transform: translateY(20px);
  opacity: 0;
  transition: transform .36s cubic-bezier(.2,.9,.2,1),opacity .36s ease;
}
.terms-modal.open .terms-panel {
  transform: none;
  opacity: 1;
}
.terms-close {
  position: absolute;
  right: 10px;
  top: 10px;
  background: transparent;
  border: none;
  color: #bbb;
  font-size: 22px;
  cursor: pointer;
}
.terms-panel h2 {
  font-size: 22px;
  margin: 0 0 12px 0;
  font-weight: 900;
  letter-spacing: 0.6px;
}
.terms-content {
  margin-top: 10px;
  color: #d7d7d7;
  font-size: 15px;
  line-height: 1.5;
}
/* RESET */
*{
  margin:0;
  padding:0;
  box-sizing:border-box;
  font-family:Inter,Arial;
}

body{
  background:#050505;
  color:white;
  overflow-x:hidden;
}


/* BACKGROUND ANIMATO */
.bg{
  position:fixed;
  inset:0;
  z-index:-1;
  background:
    radial-gradient(circle at 20% 30%, rgba(11,116,255,0.25), transparent 40%),
    radial-gradient(circle at 80% 70%, rgba(255,215,0,0.18), transparent 40%),
    radial-gradient(circle at 50% 90%, rgba(11,116,255,0.12), transparent 40%),
    #050505;
  filter:blur(60px);
  animation:bgMove 12s infinite alternate;
}

@keyframes bgMove{
  0%{transform:scale(1)}
  100%{transform:scale(1.3)}
}


/* NAVBAR */
.navbar{
  position:fixed;
  top:20px;
  left:50%;
  transform:translateX(-50%);
  z-index:1000;
  /* restored static navbar (no float) */
}

.nav-inner{
  display:flex;
  align-items:center;
  gap:40px;
  background:rgba(0,0,0,0.6);
  backdrop-filter:blur(10px);
  padding:12px 28px;
  border-radius:40px;
  box-shadow:0 10px 40px rgba(0,0,0,0.6);
}

.nav-inner a{
  color:rgba(255,255,255,0.95);
  text-decoration:none;
  opacity:.95;
  font-size:14px;
  font-weight:600;
  text-shadow:0 2px 10px rgba(0,0,0,0.35);
}

.nav-inner a:hover{opacity:1;transform:translateY(-2px);transition:transform .18s ease,opacity .12s ease}

/* Fixing syntax error by removing the empty rule */
.nav-inner a.logout-link{display:none;}

.logo{font-weight:700}

/* Make the logo match the prominent SYNEX AI style */
.logo{
  font-weight:900;
  font-size:18px;
  letter-spacing:0.6px;
  background:linear-gradient(90deg,#0b74ff,#7b2eff,#ffd700);
  -webkit-background-clip:text;
  background-clip:text;
  -webkit-text-fill-color:transparent;
  text-transform:uppercase;
  display:inline-block;
  padding:4px 6px;
}

/* header logo image */
.nav-logo{
  height:36px;
  width:auto;
  display:inline-block;
  vertical-align:middle;
  margin-right:10px;
}

@media (max-width:600px){
  .nav-logo{height:30px;margin-right:8px}
}

.login-btn{
  background:#ff6a00;
  border:none;
  padding:8px 14px;
  border-radius:20px;
  color:white;
  cursor:pointer;
}

/* increase contrast for the CTA on animated nav */
.nav-inner .login-btn{box-shadow:0 6px 22px rgba(255,106,0,0.18);border:1px solid rgba(255,255,255,0.06)}


/* HERO */
.hero{
  height:85vh;
  display:flex;
  align-items:center;
  justify-content:center;
}

.hero img{
  width:420px;
  max-width:80%;
  opacity:.75;
  animation:float 6s ease-in-out infinite;
}

@keyframes float{
  0%{transform:translateY(0)}
  50%{transform:translateY(-20px)}
  100%{transform:translateY(0)}
}


/* LOCKED PANEL */
.lock-section{
  display:flex;
  justify-content:center;
  padding:80px 20px;
}

.lock-panel{
  position:relative;
  width:760px;
  max-width:90%;
  height:520px;
  border-radius:20px;
  background:rgba(255,255,255,0.04);
  backdrop-filter:blur(10px);
  border:1px solid rgba(255,255,255,0.08);
  overflow:hidden;
}

.chat{padding:20px}
.msg{margin-bottom:10px;opacity:.7}

.lock-overlay{
  position:absolute;
  inset:0;
  background:rgba(0,0,0,.7);
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:22px;
  font-weight:600;
}
.lock-overlay{
  position:absolute;
  inset:0;
  background:rgba(0,0,0,.7);
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:flex-start;
  padding-top:40px;
  gap:8px;
}

.lock-top{
  font-size:26px;
  font-weight:700;
  color:#ffffff;
}

.lock-sub{
  font-size:16px;
  font-weight:600;
  color:#ddd;
}

/* DISCOUNT BADGE */
.discount-badge{
  position:fixed;
  top:20px;
  right:20px;
  background:linear-gradient(135deg, rgba(11,116,255,0.92), rgba(255,215,0,0.92));
  color:white;
  padding:12px 16px;
  border-radius:12px;
  box-shadow:0 8px 30px rgba(11,116,255,0.12);
  z-index:200;
  text-align:center;
  min-width:140px;
  opacity:0.95;
  backdrop-filter:blur(6px) saturate(120%);
}
.discount-main{font-weight:800;margin-bottom:6px}
#countdown{font-size:13px;font-weight:700;margin-bottom:6px}
.discount-note{font-size:11px;opacity:0.9}

/* PRICE CARD: show original struck price and discounted */
.orig-price{
  text-decoration:line-through;
  color:rgba(255,255,255,0.5);
  font-size:14px;
}
.discounted-price{
  font-size:28px;
  margin:8px 0 12px 0;
  font-weight:800;
}

/* orange for base discounted price */
.discounted-price.base-price{color:#ff6a00}
/* blue for pro discounted price */
.discounted-price.pro-price{color:#0b74ff}

/* gradient headings */
.price-card h2{
  background:linear-gradient(90deg,#0b74ff,#7b2eff,#ffd700);
  -webkit-background-clip:text;
  background-clip:text;
  -webkit-text-fill-color:transparent;
  font-size:18px;
  margin-bottom:8px;
}

/* make header colors for cards: Base = blue, Pro = gold */
/* make Pro card slightly larger and stand out */
.pricing .price-card:nth-of-type(2){
  width:320px;
  transform:translateY(-8px);
  box-shadow:0 20px 50px rgba(11,116,255,0.08);
  border:1px solid rgba(11,116,255,0.12);
}

/* orange buy buttons */
.buy-btn{background:#ff6a00}

/* lift lock panel upward and add subtle transform */
.lock-panel{transform:translateY(-80px)}

/* animated gold lock */
.lock-icon{
  font-size:56px;
  color:#ffd700;
  text-shadow:0 6px 24px rgba(255,215,0,0.28), 0 0 10px rgba(255,215,0,0.14);
  animation:lockBob 2.2s ease-in-out infinite;
}

@keyframes lockBob{
  0%{transform:translateY(0)}
  50%{transform:translateY(-14px)}
  100%{transform:translateY(0)}
}

/* center lock overlay content vertically and horizontally */
.lock-overlay{display:flex;flex-direction:column;align-items:center;justify-content:center;padding-top:0}
.lock-top{font-size:20px;margin-bottom:8px}
.lock-sub{font-size:14px;margin-top:8px}

.telegram{ text-align:center; color:#0b74ff; margin:0 auto 28px auto; max-width:520px; width:90%; }
.telegram-heading{ font-size:28px; color:#0b74ff; opacity:0.98; margin-bottom:6px; font-weight:800 }
.telegram-handle{ font-size:16px; color:#0b74ff; font-weight:700; letter-spacing:0.2px }

/* style box for telegram centered above prices without overlapping */
.telegram{ background:linear-gradient(90deg, rgba(11,116,255,0.04), rgba(255,255,255,0.01)); padding:10px 16px; border-radius:10px; box-shadow:0 8px 18px rgba(0,0,0,0.35); }

/* stronger hover / animation for price cards, ensure Pro is responsive */
.price-card{transition:transform .35s ease, box-shadow .35s ease}
.price-card:hover{transform:translateY(-12px) scale(1.02)}
.pricing .price-card:nth-of-type(2){
  width:340px;
  transform:translateY(-8px);
  box-shadow:0 24px 60px rgba(11,116,255,0.10);
  border:1px solid rgba(11,116,255,0.14);
}
.pricing .price-card:nth-of-type(2):hover{transform:translateY(-16px) scale(1.05)}

/* ensure handle is above cards (z-index) and sit above pricing */
.telegram{position:relative;z-index:90;margin:-12px auto 28px auto;left:auto;transform:none}


/* PRICING */
.pricing{
  display:flex;
  justify-content:center;
  gap:40px;
  padding:120px 20px;
  flex-wrap:wrap;
}

/* INFO SECTION */
.info-section{
  padding:60px 20px;
}
.info-inner{max-width:1100px;margin:0 auto;text-align:left}
.info-inner h2{font-size:28px;margin-bottom:12px;color:#ffffff}
.info-inner p{color:rgba(255,255,255,0.85);margin-bottom:18px}
.info-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.info-card{background:rgba(255,255,255,0.03);border-radius:12px;padding:18px;border:1px solid rgba(255,255,255,0.04)}
.info-card h3{margin-bottom:8px;color:#0b74ff}
.info-card p, .info-card ul, .info-card li{color:rgba(255,255,255,0.85);font-size:14px}
.info-card ul{padding-left:16px}
.contact{margin-top:18px;color:rgba(255,255,255,0.9)}
.contact a{color:#7bd1ff;text-decoration:none}
.tg{color:#0b74ff;font-weight:800}

@media (max-width:900px){
  .info-grid{grid-template-columns:1fr}
  .pricing{padding:60px 12px}
  .telegram-heading{font-size:28px}
  .telegram-handle{font-size:16px}
  .lock-panel{width:90%;height:420px}
}

.price-card{
  width:260px;
  background:rgba(255,255,255,0.04);
  border-radius:18px;
  padding:30px;
  text-align:center;
  border:1px solid rgba(255,255,255,0.08);
  transition:.3s;
}

.price-card:hover{transform:translateY(-10px);border:1px solid #0b74ff}

.price{font-size:36px;margin:20px 0;color:#0b74ff}

ul{list-style:none}
li{margin:12px 0;opacity:.8}

/* make only Pro pricing feature lines gold to match visual emphasis */
.price-card.pro ul li{color:#ffd700;font-weight:600}
/* highlight Pro discounted price in gold */
.price-card.pro .discounted-price{color:#ffd700}

/* logout link styling in navbar (red) */
.nav-inner a.logout-link{display:none}

/* Feature specific spacing and highlight for Base / Pro */
.feature-base{margin-top:6px}
.feature-pro{margin-top:12px}

/* Price card modifiers */
.price-card.base{border:1px solid rgba(11,116,255,0.12)}
.price-card.pro{border:1px solid rgba(255,215,0,0.14);box-shadow:0 18px 50px rgba(255,215,0,0.06)}
.price-card.active{transform:translateY(-16px) scale(1.03);box-shadow:0 34px 90px rgba(11,116,255,0.12)}

/* About section styling */
.about-section{padding:48px 20px;background:transparent}
.about-section .about-inner{max-width:900px;margin:0 auto;color:rgba(255,255,255,0.92);line-height:1.6}
.about-section h2{font-size:26px;margin-bottom:12px}
.about-section h3{font-size:18px;margin-top:20px;margin-bottom:8px;color:#ffd700}


.buy-btn{
  margin-top:20px;
  background:#0b74ff;
  border:none;
  padding:10px 18px;
  border-radius:20px;
  color:white;
  cursor:pointer;
}

/* Demo auth modal styles removed (using server-side PHP login) */

/* Inline auth modal (login/register) */
.auth-modal{
  position:fixed;
  inset:0;
  display:none;
  align-items:center;
  justify-content:center;
  background:rgba(0,0,0,0.6);
  z-index:600;
}
.auth-modal[aria-hidden="false"]{display:flex}
.auth-panel{background:linear-gradient(180deg,#081025 0%,#0b0b0b 60%);color:white;padding:18px;width:420px;max-width:92%;border-radius:14px;box-shadow:0 30px 80px rgba(0,0,0,0.6);position:relative;transform:translateY(20px);opacity:0;transition:transform .36s cubic-bezier(.2,.9,.2,1),opacity .36s ease}
.auth-modal.open .auth-panel{transform:none;opacity:1}
.auth-close{position:absolute;right:10px;top:10px;background:transparent;border:none;color:#bbb;font-size:18px;cursor:pointer}
.auth-tabs{display:flex;gap:8px;margin-bottom:12px}
.auth-tabs .tab{flex:1;padding:8px 10px;background:rgba(255,255,255,0.02);border-radius:8px;border:1px solid rgba(255,255,255,0.03);cursor:pointer;color:#cfd8e3}
.auth-tabs .tab.active{background:linear-gradient(90deg,#0b74ff,#ffd700);color:#04060a;font-weight:700}
.tab-content label{display:block;margin-bottom:8px;font-size:14px}
.tab-content input{width:100%;padding:10px;border-radius:10px;border:1px solid rgba(255,255,255,0.06);background:linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));color:#fff;margin-top:8px}
.tab-content input:focus{outline:none;box-shadow:0 8px 28px rgba(11,116,255,0.08)}
.btn{background:#ff6a00;border:none;padding:12px 14px;border-radius:12px;color:white;cursor:pointer;margin-top:12px;width:100%;font-weight:700;letter-spacing:0.2px}

/* make secondary style for blue action */
.btn.secondary{background:transparent;border:1px solid rgba(11,116,255,0.18);color:#bfe0ff}

/* body when modal open disable scroll */
body.modal-open{overflow:hidden}

/* subtle header accent inside modal */
.auth-panel:before{content:"";position:absolute;left:0;right:0;top:0;height:6px;border-top-left-radius:14px;border-top-right-radius:14px;background:linear-gradient(90deg,#0b74ff,#ffd700);}

@media (max-width:600px){
  .auth-panel{width:94%}
}

/* ANIMATION UTILITIES */
.reveal{opacity:0;transform:translateY(20px);transition:opacity .6s cubic-bezier(.2,.9,.2,1),transform .6s cubic-bezier(.2,.9,.2,1)}
.reveal.show{opacity:1;transform:none}

/* small pop/pulse interaction */
.pulse{animation:tapPulse .45s ease-out}
@keyframes tapPulse{
  0%{transform:scale(1);box-shadow:0 0 0 rgba(11,116,255,0)}
  50%{transform:scale(0.98);box-shadow:0 12px 30px rgba(11,116,255,0.08)}
  100%{transform:scale(1);box-shadow:0 0 0 rgba(11,116,255,0)}
}

/* hover pop for buttons */
.buy-btn:hover{transform:translateY(-4px) scale(1.02)}

/* subtle focus ring for interactive elements on touch/click */
.interactive:focus{outline:none;box-shadow:0 0 0 6px rgba(11,116,255,0.08);border-radius:8px}

/* lock icon click effect */
.lock-icon.click-anim{animation:lockClick 0.6s ease}
@keyframes lockClick{
  0%{transform:translateY(0) scale(1)}
  40%{transform:translateY(-20px) scale(1.08)}
  100%{transform:translateY(0) scale(1)}
}

/* reveal on scroll initial state */
.scroll-reveal{opacity:0;transform:translateY(30px);transition:opacity .7s ease, transform .7s ease}
.scroll-reveal.visible{opacity:1;transform:none}

@keyframes modalPop{
  from{transform:translateY(12px) scale(.98);opacity:0}
  to{transform:none;opacity:1}
}

/* Package panel shown on join.php */
.package-modal{position:fixed;inset:0;display:none;align-items:center;justify-content:center;background:rgba(0,0,0,0.75);z-index:650}
.package-modal[aria-hidden="false"]{display:flex}
.package-panel{background:#000;color:#fff;padding:22px;border-radius:12px;max-width:520px;width:92%;box-shadow:0 30px 80px rgba(0,0,0,0.7);position:relative;transform:translateY(12px);opacity:0;transition:transform .28s cubic-bezier(.2,.9,.2,1),opacity .28s ease}
.package-modal.open .package-panel{transform:none;opacity:1}
.package-panel h2{font-size:22px;margin:0 0 8px 0;font-weight:900;letter-spacing:0.6px}
.pkg-telegram{color:#0b74ff;font-weight:800}
.pkg-contact{margin-top:12px;font-size:16px}
.pkg-instruction{margin-top:10px;color:#d7d7d7;font-size:14px;line-height:1.5}
.package-close{position:absolute;right:10px;top:8px;background:transparent;border:none;color:#bbb;font-size:18px;cursor:pointer}
/* price and features */
.pkg-price{margin-top:6px;margin-bottom:12px}
.pkg-price .orig-price{margin-right:10px;color:rgba(255,255,255,0.45);text-decoration:line-through;font-weight:700}
.pkg-price .discounted-price{font-size:20px;font-weight:900}
.pkg-features{list-style:none;padding-left:0;margin-top:10px}
.pkg-features li{margin:8px 0;color:rgba(255,255,255,0.9)}

/* base / pro variants */
.package-panel.base{border:1px solid rgba(11,116,255,0.12);box-shadow:0 24px 80px rgba(11,116,255,0.06)}
.package-panel.base .pkg-telegram{color:#0b74ff}
.package-panel.base .discounted-price{color:#0b74ff}

.package-panel.pro{border:1px solid rgba(123,46,255,0.18);box-shadow:0 28px 100px rgba(123,46,255,0.08)}
.package-panel.pro{background:linear-gradient(180deg,#0b0620 0%, #07020a 100%)}
.package-panel.pro .pkg-telegram{color:#b48bff;font-weight:900}
.package-panel.pro .discounted-price{color:#ffd700}
.package-panel.pro .pkg-features li{color:#ffd700;font-weight:700}

/* MOBILE RESPONSIVE IMPROVEMENTS */
@media (max-width: 600px) {
  body {
    font-size: 15px;
    padding: 0;
    margin: 0;
    overflow-x: hidden;
  }
  .navbar {
    position: sticky;
    top: 0;
    z-index: 1000;
    padding: 8px 0;
    background: #0b0b0b;
    box-shadow: 0 2px 18px rgba(0,0,0,0.18);
  }
  .nav-inner {
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    padding: 0 8px;
  }
  .nav-logo {
    width: 38px;
    height: 38px;
  }
  .logo {
    font-size: 18px;
    margin-left: 6px;
  }
  .nav-inner a {
    font-size: 14px;
    margin: 0 4px;
    padding: 6px 8px;
    border-radius: 8px;
    display: inline-block;
  }
  .login-btn {
    font-size: 14px;
    padding: 7px 12px;
    border-radius: 10px;
  }
  .open-sidebar {
    position: fixed;
    bottom: 18px;
    right: 18px;
    z-index: 1200;
    font-size: 15px;
    padding: 10px 18px;
    border-radius: 16px;
    box-shadow: 0 6px 22px rgba(11,116,255,0.18);
  }
  .version-sidebar {
    width: 92vw;
    max-width: 380px;
    left: 4vw;
    top: 0;
    border-radius: 18px;
    box-shadow: 0 18px 40px rgba(11,116,255,0.12);
    padding: 12px 8px;
  }
  .sidebar-header {
    font-size: 17px;
    padding: 8px 0;
  }
  .version-list {
    grid-template-columns: repeat(2,1fr);
    gap: 10px;
  }
  .version-card {
    font-size: 15px;
    padding: 10px 8px;
    border-radius: 12px;
  }
  .version-modal {
    width: 98vw;
    max-width: 420px;
    left: 1vw;
    top: 8vw;
    border-radius: 18px;
    padding: 10px 6px;
  }
  .version-panel {
    padding: 12px 8px;
    border-radius: 16px;
  }
  .version-panel h2 {
    font-size: 19px;
  }
  .version-content {
    font-size: 14px;
    padding: 6px 2px;
  }
  .export-btn {
    font-size: 14px;
    padding: 8px 12px;
    border-radius: 10px;
  }
  .terms-btn {
    font-size: 14px;
    padding: 8px 12px;
    border-radius: 10px;
    bottom: 12px;
    right: 12px;
  }
  .terms-modal {
    width: 98vw;
    max-width: 420px;
    left: 1vw;
    top: 8vw;
    border-radius: 18px;
    padding: 10px 6px;
  }
  .terms-panel {
    padding: 12px 8px;
    border-radius: 16px;
  }
  .terms-panel h2 {
    font-size: 19px;
  }
  .terms-content {
    font-size: 14px;
    padding: 6px 2px;
  }
  .hero img {
    width: 90vw;
    max-width: 320px;
    margin: 0 auto;
    display: block;
  }
  .discount-badge {
    font-size: 15px;
    padding: 10px 8px;
    border-radius: 12px;
    margin: 12px auto;
    width: 92vw;
    max-width: 340px;
  }
  #countdown {
    font-size: 13px;
  }
  .lock-panel {
    padding: 10px 6px;
    border-radius: 14px;
    margin: 10px auto;
    width: 94vw;
    max-width: 340px;
  }
  .lock-overlay {
    padding: 8px 0;
  }
  .lock-top {
    font-size: 17px;
  }
  .lock-sub {
    font-size: 13px;
  }
  .telegram {
    font-size: 15px;
    padding: 8px 6px;
    border-radius: 10px;
    margin: 8px auto 18px auto;
    width: 92vw;
    max-width: 340px;
  }
  .telegram-heading {
    font-size: 19px;
    margin-bottom: 4px;
  }
  .telegram-handle {
    font-size: 14px;
  }
  .pricing {
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 8px 0;
    width: 98vw;
    max-width: 420px;
    margin: 0 auto;
  }
  .price-card {
    font-size: 15px;
    padding: 12px 8px;
    border-radius: 14px;
    margin: 0 auto;
    width: 94vw;
    max-width: 340px;
    box-shadow: 0 8px 18px rgba(0,0,0,0.18);
  }
  .price-card h2 {
    font-size: 18px;
  }
  .orig-price, .discounted-price {
    font-size: 15px;
  }
  .buy-btn {
    font-size: 15px;
    padding: 10px 14px;
    border-radius: 12px;
    margin-top: 8px;
    width: 100%;
  }
  .info-section {
    padding: 8px 0;
    width: 98vw;
    max-width: 420px;
    margin: 0 auto;
  }
  .info-inner {
    padding: 8px 4px;
    border-radius: 12px;
    font-size: 15px;
  }
  .info-grid {
    display: flex;
    flex-direction: column;
    gap: 10px;
  }
  .info-card {
    font-size: 14px;
    padding: 10px 6px;
    border-radius: 10px;
    margin: 0 auto;
    width: 92vw;
    max-width: 320px;
  }
  .info-card h3 {
    font-size: 16px;
  }
  .contact {
    font-size: 14px;
    margin-top: 10px;
  }
  .auth-modal {
    width: 98vw;
    max-width: 420px;
    left: 1vw;
    top: 8vw;
    border-radius: 18px;
    padding: 10px 6px;
  }
  .auth-panel {
    padding: 12px 8px;
    border-radius: 16px;
    width: 98vw;
    max-width: 420px;
  }
  .auth-tabs .tab {
    font-size: 14px;
    padding: 7px 10px;
    border-radius: 8px;
  }
  .tab-content label {
    font-size: 13px;
  }
  .tab-content input {
    font-size: 14px;
    padding: 8px 10px;
    border-radius: 10px;
  }
  .btn {
    font-size: 15px;
    padding: 10px 14px;
    border-radius: 12px;
    margin-top: 8px;
    width: 100%;
  }
}