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

body {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  background: #0a0e27;
  color: #ffffff;
  min-height: 100vh;
  padding-top: 0;
}

.container { max-width: 1440px; margin: 0 auto; padding: 0 32px; }

.header { text-align:center; color:#e5e7eb; margin: 20px 0 24px; }
.header h1 { font-size: 32px; margin-bottom: 6px; background: linear-gradient(135deg, #ffffff 0%, #a0aec0 100%); -webkit-background-clip:text; -webkit-text-fill-color:transparent; }
.header .subtitle { font-size: 15px; opacity: 0.8; }

.toggle-wrap { display:flex; justify-content:center; gap:10px; align-items:center; margin: 12px 0 32px; font-size: 14px; }
.toggle-wrap button { border:1px solid rgba(255,255,255,0.2); background: rgba(255,255,255,0.04); color:#e5e7eb; padding:8px 14px; cursor:pointer; border-radius:8px; transition: all .2s; }
.toggle-wrap button.active { background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); color:#fff; border-color: transparent; }

.pricing-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 16px; margin-bottom: 30px; align-items: stretch; border: none; }
.pricing-card { background: rgba(255,255,255,0.05); border-radius: 12px; padding: 18px; border: 1px solid rgba(255,255,255,0.05); position: relative; box-shadow: 0 20px 40px rgba(0,0,0,0.25); display:flex; flex-direction:column; min-width: 0; }
.pricing-card.featured { border: 2px solid #667eea; }
.badge { position:absolute; top:12px; right:12px; background: #667eea; color:white; padding:6px 10px; border-radius:14px; font-size:12px; font-weight:700; }
.plan-name { font-size: 18px; font-weight: 700; margin-bottom: 6px; color:#fff; }
.plan-price { font-size: 24px; font-weight: 800; color: #ffffff; margin-bottom: 4px; }
.plan-period { color: #cbd5e0; margin-bottom: 12px; font-size: 14px; }
.price-note { color: #50C878; font-weight: 700; margin-bottom: 14px; font-size: 13px; line-height: 1.45; }
.features-list { list-style: none; flex:1; }
.features-list li { padding: 7px 0; border-bottom: 1px solid rgba(255,255,255,0.1); color: #e2e8f0; font-size: 13px; line-height: 1.35; }
.features-list li:last-child { border-bottom: none; }
.cta-button { width: 100%; padding: 12px; border: none; border-radius: 8px; color: white; font-weight: 700; cursor: pointer; transition: all 0.2s; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); margin-top: 16px; }
.cta-button:hover { transform: translateY(-1px); box-shadow: 0 12px 20px rgba(102,126,234,0.35); }
.notes { font-size: 13px; color:#cbd5e0; margin: 14px 0 6px; line-height: 1.6; }

@media (max-width: 1280px) {
  .pricing-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 1100px) {
  .container { padding: 0 32px; }
  .pricing-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 768px) {
  .container { padding: 0 24px; }
  .pricing-grid { grid-template-columns: 1fr; }
}

@media (max-width: 540px) {
  .container { padding: 0 20px; }
}