:root {
  --purple:      #7B2FBE;
  --purple-dark: #5a1f8f;
  --purple-light:#9d4fd6;
  --pink:        #FF2D78;
  --pink-light:  #ff6ba8;
  --gold:        #FFD700;
  --gold-dark:   #e6b800;
  --red:         #E63946;
  --white:       #ffffff;
  --cream:       #FFF8F0;
  --cream-dark:  #f0e8dc;
  --text-dark:   #1a0a2e;
  --text-mid:    #4a3060;
  --text-light:  #8a7a9a;
  --radius:      16px;
  --radius-lg:   24px;
  --shadow:      0 8px 32px rgba(123,47,190,0.15);
  --shadow-lg:   0 20px 60px rgba(123,47,190,0.25);
}

/* ── RESET ── */
.gems-tv-page, .gems-tv-page *, .gems-tv-page *::before, .gems-tv-page *::after { box-sizing:border-box; }
.gems-tv-page { scroll-behavior:smooth; }
.gems-tv-page {
  font-family:'Inter',sans-serif;
  background:var(--white);
  color:var(--text-dark);
  overflow-x:hidden;
}

/* ── NAV ── */
.gems-nav {
  position:fixed;
  top:0; left:0; right:0;
  z-index:9999;
  background:rgba(255,255,255,0.95);
  backdrop-filter:blur(12px);
  border-bottom:1px solid rgba(123,47,190,0.1);
  padding:0 5%;
  display:flex;
  align-items:center;
  justify-content:space-between;
  height:70px;
}
.nav-logo { display:flex; align-items:center; gap:10px; text-decoration:none; }
.nav-logo-icon {
  width:40px; height:40px;
  background:linear-gradient(135deg,var(--purple),var(--pink));
  border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  font-size:18px;
}
.nav-logo-text {
  font-family:'Montserrat',sans-serif; font-weight:900; font-size:22px;
  background:linear-gradient(135deg,var(--purple),var(--pink));
  -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text;
}
.nav-logo-sub {
  font-size:10px; color:var(--gold-dark); font-weight:700;
  letter-spacing:2px; margin-top:-4px; display:block;
  -webkit-text-fill-color:var(--gold-dark);
}
.nav-links { display:flex; align-items:center; gap:32px; list-style:none; }
.nav-links a { text-decoration:none!important; background:none!important; box-shadow:none!important; border:none!important; color:var(--text-mid)!important; font-size:14px!important; font-weight:500!important; padding:0!important; border-radius:0!important; transition:color 0.2s; }
.nav-links a:hover { color:var(--purple)!important; }
.nav-cta {
  background:linear-gradient(135deg,var(--purple),var(--pink))!important;
  color:var(--white)!important;
  padding:10px 24px!important;
  border-radius:50px!important;
  font-weight:600!important;
  box-shadow:0 4px 15px rgba(255,45,120,0.3)!important;
  transition:transform 0.2s,box-shadow 0.2s!important;
  -webkit-text-fill-color:var(--white)!important;
}
.nav-cta:hover { transform:translateY(-2px); box-shadow:0 8px 25px rgba(255,45,120,0.4)!important; }

/* ── HERO ── */
.hero {
  min-height:100vh;
  background:linear-gradient(135deg,#1a0a2e 0%,#2d0a4e 40%,#4a0a6e 70%,#6b1a8e 100%);
  display:flex; align-items:center; gap:60px;
  padding:100px 5% 60px;
  position:relative; overflow:hidden;
}
.hero::before {
  content:''; position:absolute; top:-50%; right:-20%;
  width:700px; height:700px;
  background:radial-gradient(circle,rgba(255,45,120,0.15) 0%,transparent 70%);
  animation:pulse 4s ease-in-out infinite;
}
.hero::after {
  content:''; position:absolute; bottom:-20%; left:-10%;
  width:500px; height:500px;
  background:radial-gradient(circle,rgba(255,215,0,0.1) 0%,transparent 70%);
  animation:pulse 5s ease-in-out infinite reverse;
}
@keyframes pulse { 0%,100%{transform:scale(1);opacity:0.5} 50%{transform:scale(1.1);opacity:1} }

.hero-content { max-width:600px; position:relative; z-index:2; }
.hero-badge {
  display:inline-flex; align-items:center; gap:8px;
  background:rgba(255,215,0,0.15); border:1px solid rgba(255,215,0,0.4);
  color:var(--gold); padding:8px 18px; border-radius:50px;
  font-size:13px; font-weight:600; margin-bottom:28px; letter-spacing:0.5px;
}
.hero-badge::before { content:'●'; color:var(--gold); animation:blink 1.5s infinite; font-size:10px; }
@keyframes blink { 0%,100%{opacity:1} 50%{opacity:0.3} }

.hero-title {
  font-family:'Montserrat',sans-serif; font-weight:900;
  font-size:clamp(36px,5vw,62px); line-height:1.1;
  color:var(--white); margin-bottom:20px;
}
.hero-title span {
  background:linear-gradient(135deg,var(--gold),var(--pink));
  -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text;
}
.hero-sub { font-size:18px; color:rgba(255,255,255,0.75); line-height:1.7; margin-bottom:36px; max-width:500px; }
.hero-btns { display:flex; gap:16px; flex-wrap:wrap; margin-bottom:48px; }

.btn-primary {
  background:linear-gradient(135deg,var(--pink),#ff6b35)!important;
  color:var(--white)!important; padding:16px 36px!important; border-radius:50px!important;
  font-size:16px!important; font-weight:700!important; text-decoration:none!important;
  display:inline-flex!important; align-items:center; gap:8px;
  box-shadow:0 8px 30px rgba(255,45,120,0.4)!important;
  transition:transform 0.2s,box-shadow 0.2s; border:none!important; cursor:pointer;
}
.btn-primary:hover { transform:translateY(-3px); box-shadow:0 12px 40px rgba(255,45,120,0.5)!important; color:var(--white)!important; }
.btn-secondary {
  background:rgba(255,255,255,0.1)!important; color:var(--white)!important;
  padding:16px 36px!important; border-radius:50px!important; font-size:16px!important; font-weight:600!important;
  text-decoration:none!important; border:1px solid rgba(255,255,255,0.3)!important; transition:background 0.2s;
}
.btn-secondary:hover { background:rgba(255,255,255,0.2)!important; color:var(--white)!important; }

.hero-stats { display:flex; gap:36px; flex-wrap:wrap; }
.hero-stat-num { font-family:'Montserrat',sans-serif; font-weight:900; font-size:28px; color:var(--gold); }
.hero-stat-label { font-size:13px; color:rgba(255,255,255,0.6); margin-top:2px; }

.hero-visual { flex:1; display:flex; align-items:center; justify-content:center; position:relative; z-index:2; min-width:320px; }
.hero-tv {
  width:100%; max-width:480px;
  background:rgba(255,255,255,0.05); border:1px solid rgba(255,255,255,0.1);
  border-radius:var(--radius-lg); padding:24px;
  backdrop-filter:blur(10px); box-shadow:var(--shadow-lg);
}
.tv-screen {
  background:linear-gradient(135deg,#0a0a1a,#1a0a2e); border-radius:12px;
  aspect-ratio:16/10; display:flex; align-items:center; justify-content:center;
  margin-bottom:16px; position:relative; overflow:hidden;
}
.tv-screen::before { content:'▶'; font-size:48px; color:var(--pink); opacity:0.8; filter:drop-shadow(0 0 20px rgba(255,45,120,0.6)); }
.tv-channels { display:flex; gap:8px; flex-wrap:wrap; }
.tv-channel {
  background:rgba(255,255,255,0.08); border:1px solid rgba(255,255,255,0.12);
  color:rgba(255,255,255,0.7); padding:6px 12px; border-radius:8px; font-size:12px; font-weight:500;
}
.tv-channel.active { background:linear-gradient(135deg,var(--purple),var(--pink)); color:var(--white); border-color:transparent; }

/* ── COMPARISON ── */
.comparison { background:var(--cream); padding:80px 5%; }
.section-label { text-align:center; font-size:13px; font-weight:700; letter-spacing:2px; text-transform:uppercase; color:var(--purple); margin-bottom:12px; }
.section-title { font-family:'Montserrat',sans-serif; font-weight:900; font-size:clamp(28px,4vw,44px); text-align:center; color:var(--text-dark); margin-bottom:16px; line-height:1.2; }
.section-title span { background:linear-gradient(135deg,var(--purple),var(--pink)); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; }
.section-sub { text-align:center; font-size:16px; color:var(--text-light); max-width:540px; margin:0 auto 56px; line-height:1.7; }
.comparison-table { max-width:800px; margin:0 auto; border-radius:var(--radius-lg); overflow:hidden; box-shadow:var(--shadow-lg); }
.comparison-header { display:grid; grid-template-columns:1fr 1fr 1fr 1fr; background:var(--text-dark); padding:20px 24px; gap:16px; }
.comparison-header-cell { text-align:center; color:rgba(255,255,255,0.5); font-size:13px; font-weight:600; letter-spacing:0.5px; }
.comparison-header-cell.gems { color:var(--gold); font-weight:700; }
.comparison-row { display:grid; grid-template-columns:1fr 1fr 1fr 1fr; padding:18px 24px; gap:16px; background:var(--white); border-bottom:1px solid rgba(123,47,190,0.06); align-items:center; transition:background 0.2s; }
.comparison-row:hover { background:rgba(123,47,190,0.03); }
.comparison-row:last-child { border-bottom:none; }
.comparison-row.gems-row { background:linear-gradient(135deg,rgba(123,47,190,0.04),rgba(255,45,120,0.04)); }
.comparison-cell { text-align:center; font-size:15px; color:var(--text-mid); }
.comparison-cell.label { text-align:left; font-weight:600; color:var(--text-dark); }
.comparison-cell.gems-label { text-align:left; font-weight:800; color:var(--purple); }
.comparison-cell.gems-price { font-family:'Montserrat',sans-serif; font-weight:900; font-size:18px; background:linear-gradient(135deg,var(--purple),var(--pink)); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; }
.comparison-cell.competitor { color:var(--red); font-weight:600; text-decoration:line-through; opacity:0.7; }
.savings-badge { background:linear-gradient(135deg,var(--gold),#ff9500); color:var(--text-dark); padding:6px 14px; border-radius:50px; font-size:12px; font-weight:700; display:inline-block; animation:glow 2s ease-in-out infinite; }
.savings-badge.best { background:linear-gradient(135deg,var(--purple),var(--pink)); color:white; }
@keyframes glow { 0%,100%{box-shadow:0 0 10px rgba(255,215,0,0.3)} 50%{box-shadow:0 0 25px rgba(255,215,0,0.6)} }

/* ── HOW IT WORKS ── */
.how { padding:80px 5%; background:var(--white); }
.steps { display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:32px; max-width:1000px; margin:0 auto; }
.step { text-align:center; padding:36px 24px; border-radius:var(--radius-lg); background:var(--cream); border:1px solid rgba(123,47,190,0.08); transition:transform 0.3s,box-shadow 0.3s; position:relative; overflow:hidden; }
.step::before { content:''; position:absolute; top:0; left:0; right:0; height:4px; background:linear-gradient(90deg,var(--purple),var(--pink)); opacity:0; transition:opacity 0.3s; }
.step:hover { transform:translateY(-6px); box-shadow:var(--shadow); }
.step:hover::before { opacity:1; }
.step-icon { width:64px; height:64px; border-radius:50%; background:linear-gradient(135deg,var(--purple),var(--pink)); display:flex; align-items:center; justify-content:center; font-size:26px; margin:0 auto 20px; box-shadow:0 8px 24px rgba(123,47,190,0.3); }
.step h3 { font-family:'Montserrat',sans-serif; font-weight:700; font-size:18px; color:var(--text-dark); margin-bottom:10px; }
.step p { font-size:14px; color:var(--text-light); line-height:1.6; }

/* ── PRICING ── */
.pricing { padding:80px 5%; background:linear-gradient(135deg,#1a0a2e 0%,#2d0a4e 100%); position:relative; overflow:hidden; }
.pricing::before { content:''; position:absolute; top:0; left:0; right:0; bottom:0; background:radial-gradient(circle at 70% 50%,rgba(255,45,120,0.1) 0%,transparent 60%); pointer-events:none; }
.pricing .section-label { color:rgba(255,255,255,0.5); }
.pricing .section-title { color:var(--white); }
.pricing .section-sub { color:rgba(255,255,255,0.6); }
.trial-banner { background:linear-gradient(135deg,var(--gold),#ff9500); color:var(--text-dark); text-align:center; padding:14px 24px; border-radius:50px; font-size:15px; font-weight:700; max-width:480px; margin:0 auto 48px; box-shadow:0 8px 30px rgba(255,215,0,0.3); display:block; }
.plans { display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:24px; max-width:960px; margin:0 auto; }
.plan { background:rgba(255,255,255,0.06); border:1px solid rgba(255,255,255,0.1); border-radius:var(--radius-lg); padding:36px 28px; text-align:center; transition:transform 0.3s,border-color 0.3s; position:relative; backdrop-filter:blur(10px); }
.plan:hover { transform:translateY(-6px); border-color:rgba(255,215,0,0.4); }
.plan.featured { background:rgba(255,255,255,0.1); border-color:var(--gold); transform:scale(1.04); box-shadow:0 20px 60px rgba(255,215,0,0.2); }
.plan.featured:hover { transform:scale(1.04) translateY(-6px); }
.plan-badge { position:absolute; top:-14px; left:50%; transform:translateX(-50%); background:linear-gradient(135deg,var(--gold),#ff9500); color:var(--text-dark); padding:6px 20px; border-radius:50px; font-size:12px; font-weight:700; letter-spacing:0.5px; white-space:nowrap; }
.plan-badge.purple { background:linear-gradient(135deg,var(--purple),var(--pink)); color:white; }
.plan-name { font-family:'Montserrat',sans-serif; font-weight:700; font-size:16px; color:rgba(255,255,255,0.7); letter-spacing:1px; text-transform:uppercase; margin-bottom:16px; }
.plan-price { font-family:'Montserrat',sans-serif; font-weight:900; font-size:52px; color:var(--white); line-height:1; margin-bottom:4px; }
.plan-price span { font-size:22px; font-weight:600; color:rgba(255,255,255,0.6); }
.plan-period { font-size:14px; color:rgba(255,255,255,0.5); margin-bottom:8px; }
.plan-saving { background:rgba(255,215,0,0.15); border:1px solid rgba(255,215,0,0.3); color:var(--gold); padding:4px 14px; border-radius:50px; font-size:12px; font-weight:600; display:inline-block; margin-bottom:24px; }
.plan-features { list-style:none; margin-bottom:28px; text-align:left; padding:0; }
.plan-features li { font-size:14px; color:rgba(255,255,255,0.75); padding:8px 0; border-bottom:1px solid rgba(255,255,255,0.06); display:flex; align-items:center; gap:10px; }
.plan-features li:last-child { border-bottom:none; }
.plan-features li::before { content:'✓'; color:var(--gold); font-weight:700; flex-shrink:0; }
.plan-btn { width:100%; padding:14px; border-radius:50px; font-size:15px; font-weight:700; cursor:pointer; border:none; transition:transform 0.2s,box-shadow 0.2s; font-family:'Inter',sans-serif; text-decoration:none; display:block; text-align:center; }
.plan-btn-outline { background:transparent; color:var(--white); border:1px solid rgba(255,255,255,0.3)!important; }
.plan-btn-outline:hover { background:rgba(255,255,255,0.08); color:var(--white); }
.plan-btn-filled { background:linear-gradient(135deg,var(--pink),#ff6b35); color:var(--white); box-shadow:0 8px 24px rgba(255,45,120,0.35); }
.plan-btn-filled:hover { transform:translateY(-2px); box-shadow:0 12px 32px rgba(255,45,120,0.5); color:var(--white); }

/* ── PAYMENT ── */
.payment { padding:70px 5%; background:var(--cream); }
.payment-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(140px,1fr)); gap:16px; max-width:800px; margin:0 auto; }
.payment-card { background:var(--white); border:1px solid rgba(123,47,190,0.1); border-radius:var(--radius); padding:20px 16px; text-align:center; box-shadow:0 4px 16px rgba(123,47,190,0.06); transition:transform 0.2s,box-shadow 0.2s; }
.payment-card:hover { transform:translateY(-4px); box-shadow:var(--shadow); }
.payment-icon { font-size:28px; margin-bottom:8px; display:block; }
.payment-name { font-size:13px; font-weight:600; color:var(--text-mid); }
.payment-note { text-align:center; font-size:13px; color:var(--text-light); margin-top:24px; max-width:500px; margin-left:auto; margin-right:auto; }

/* ── FEATURES ── */
.features { padding:80px 5%; background:var(--white); }
.features-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:24px; max-width:1000px; margin:0 auto; }
.feature-card { padding:28px 24px; border-radius:var(--radius-lg); background:linear-gradient(135deg,rgba(123,47,190,0.04),rgba(255,45,120,0.04)); border:1px solid rgba(123,47,190,0.08); transition:transform 0.3s; }
.feature-card:hover { transform:translateY(-4px); }
.feature-icon { font-size:32px; margin-bottom:14px; display:block; }
.feature-card h3 { font-family:'Montserrat',sans-serif; font-weight:700; font-size:17px; color:var(--text-dark); margin-bottom:8px; }
.feature-card p { font-size:14px; color:var(--text-light); line-height:1.6; margin:0; }

/* ── REVIEWS ── */
.reviews { padding:80px 5%; background:linear-gradient(135deg,var(--cream),rgba(123,47,190,0.05)); }
.reviews-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:24px; max-width:1000px; margin:0 auto; }
.review-card { background:var(--white); border-radius:var(--radius-lg); padding:28px; box-shadow:0 4px 20px rgba(123,47,190,0.08); border:1px solid rgba(123,47,190,0.06); transition:transform 0.3s; position:relative; }
.review-card:hover { transform:translateY(-4px); }
.review-card::before { content:'"'; position:absolute; top:16px; right:24px; font-size:60px; color:rgba(123,47,190,0.08); font-family:'Montserrat',sans-serif; font-weight:900; line-height:1; }
.stars { color:var(--gold); font-size:16px; margin-bottom:14px; letter-spacing:2px; display:block; }
.review-text { font-size:15px; color:var(--text-mid); line-height:1.7; margin-bottom:20px; font-style:italic; }
.reviewer { display:flex; align-items:center; gap:12px; }
.reviewer-avatar { width:44px; height:44px; border-radius:50%; background:linear-gradient(135deg,var(--purple),var(--pink)); display:flex; align-items:center; justify-content:center; color:var(--white); font-weight:700; font-size:16px; flex-shrink:0; }
.reviewer-name { font-weight:700; font-size:15px; color:var(--text-dark); }
.reviewer-location { font-size:12px; color:var(--text-light); margin-top:2px; }
.review-verified { display:inline-flex; align-items:center; gap:4px; font-size:11px; color:#22c55e; font-weight:600; margin-top:4px; }

/* ── TRUST ── */
.trust { padding:50px 5%; background:var(--white); }
.trust-items { display:flex; justify-content:center; gap:48px; flex-wrap:wrap; max-width:800px; margin:0 auto; }
.trust-item { display:flex; align-items:center; gap:10px; font-size:14px; font-weight:600; color:var(--text-mid); }
.trust-item-icon { width:36px; height:36px; border-radius:50%; background:linear-gradient(135deg,var(--purple),var(--pink)); display:flex; align-items:center; justify-content:center; font-size:16px; flex-shrink:0; }

/* ── CTA ── */
.cta-section { padding:100px 5%; background:linear-gradient(135deg,var(--purple-dark),var(--purple),var(--purple-light)); text-align:center; position:relative; overflow:hidden; }
.cta-section::before { content:''; position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); width:600px; height:600px; background:radial-gradient(circle,rgba(255,215,0,0.1) 0%,transparent 70%); pointer-events:none; }
.cta-section h2 { font-family:'Montserrat',sans-serif; font-weight:900; font-size:clamp(28px,4vw,48px); color:var(--white); margin-bottom:16px; position:relative; }
.cta-section .cta-sub { font-size:18px; color:rgba(255,255,255,0.75); margin-bottom:36px; position:relative; }
.cta-btns { display:flex; gap:16px; justify-content:center; flex-wrap:wrap; position:relative; }

/* ── FOOTER ── */
.gems-footer { background:var(--text-dark); padding:60px 5% 32px; color:rgba(255,255,255,0.6); }
.footer-top { display:grid; grid-template-columns:2fr 1fr 1fr 1fr; gap:48px; margin-bottom:48px; }
.footer-logo { display:flex; align-items:center; gap:10px; margin-bottom:16px; }
.footer-logo-icon { width:36px; height:36px; background:linear-gradient(135deg,var(--purple),var(--pink)); border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:16px; }
.footer-logo-text { font-family:'Montserrat',sans-serif; font-weight:900; font-size:20px; background:linear-gradient(135deg,var(--purple-light),var(--pink)); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; }
.footer-brand-desc { font-size:14px; line-height:1.7; max-width:280px; color:rgba(255,255,255,0.5); }
.footer-col h4 { font-family:'Montserrat',sans-serif; font-weight:700; font-size:14px; color:var(--white); margin-bottom:16px; letter-spacing:0.5px; }
.footer-col ul { list-style:none; padding:0; }
.footer-col ul li { margin-bottom:10px; }
.footer-col ul li a { text-decoration:none; color:rgba(255,255,255,0.5); font-size:14px; transition:color 0.2s; }
.footer-col ul li a:hover { color:var(--gold); }
.footer-bottom { border-top:1px solid rgba(255,255,255,0.08); padding-top:28px; display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:16px; }
.footer-bottom p { font-size:13px; color:rgba(255,255,255,0.5); }
.footer-legal { display:flex; gap:24px; }
.footer-legal a { font-size:13px; color:rgba(255,255,255,0.4); text-decoration:none; transition:color 0.2s; }
.footer-legal a:hover { color:var(--gold); }

/* ── ANIMATIONS ── */
.fade-up { opacity:0; transform:translateY(30px); transition:opacity 0.6s ease,transform 0.6s ease; }
.fade-up.visible { opacity:1; transform:translateY(0); }
.fade-up:nth-child(2) { transition-delay:0.1s; }
.fade-up:nth-child(3) { transition-delay:0.2s; }
.fade-up:nth-child(4) { transition-delay:0.3s; }

/* ── RESPONSIVE ── */
@media (max-width:900px) {
  .hero { flex-direction:column; text-align:center; padding:90px 4% 60px; gap:40px; }
  .hero-content { max-width:100%; }
  .hero-btns { justify-content:center; }
  .hero-stats { justify-content:center; }
  .hero-visual { min-width:unset; width:100%; }
  .nav-links { display:none; }
  .footer-top { grid-template-columns:1fr 1fr; gap:32px; }
  .comparison-header,.comparison-row { font-size:12px; padding:14px 12px; gap:8px; }
}
@media (max-width:600px) {
  .footer-top { grid-template-columns:1fr; }
  .plans { grid-template-columns:1fr; }
  .plan.featured { transform:scale(1); }
  .plan.featured:hover { transform:translateY(-6px); }
  .trust-items { gap:24px; }
  .comparison-header,.comparison-row { grid-template-columns:1.5fr 1fr 1fr 1fr; font-size:11px; }
}
