/* ConvertFlow - Pricing Page CSS */

* { margin:0; padding:0; box-sizing:border-box; }
body { font-family:'Inter',system-ui,-apple-system,sans-serif; background:#060609; color:#e6edf3; min-height:100vh; }

/* ── Gate ── */
.gate-overlay { min-height:100vh; display:flex; align-items:center; justify-content:center; background:radial-gradient(ellipse at top,rgba(249,115,22,.06),transparent 60%),#060609; }
.gate-card { background:#111118; border:1px solid rgba(255,255,255,.06); border-radius:20px; padding:48px 36px; text-align:center; max-width:380px; }
.gate-icon { font-size:40px; margin-bottom:14px; }
.gate-card h2 { font-size:20px; font-weight:800; margin-bottom:8px; }
.gate-card p { font-size:13px; color:#6b7280; margin-bottom:20px; line-height:1.5; }
.gate-btn { display:inline-block; padding:12px 28px; border-radius:12px; background:linear-gradient(135deg,#f97316,#ef4444); color:#fff; font-size:14px; font-weight:700; text-decoration:none; transition:all .2s; }
.gate-btn:hover { transform:translateY(-2px); box-shadow:0 6px 20px rgba(249,115,22,.3); }

/* ── Main ── */
.main { max-width:1100px; margin:0 auto; padding:0 20px; }

/* ── Header ── */
.header { padding:20px 0; border-bottom:1px solid rgba(255,255,255,.06); margin-bottom:40px; }
.header-inner { display:flex; align-items:center; justify-content:space-between; }
.brand { display:flex; align-items:center; gap:12px; }
.brand-icon { width:40px; height:40px; border-radius:12px; background:linear-gradient(135deg,#f97316,#ef4444); display:flex; align-items:center; justify-content:center; font-weight:900; font-size:18px; color:#fff; }
.brand-name { font-size:18px; font-weight:800; letter-spacing:-.5px; margin:0; }
.brand-tag { font-size:10px; color:#6b7280; text-transform:uppercase; letter-spacing:1px; font-weight:600; margin:2px 0 0; }
.header-right { display:flex; align-items:center; gap:14px; flex-wrap:wrap; justify-content:flex-end; }
.account-box { display:flex; align-items:center; gap:9px; padding:6px 12px 6px 6px; background:rgba(255,255,255,.03); border:1px solid rgba(255,255,255,.07); border-radius:100px; }
.account-avatar { width:30px; height:30px; flex-shrink:0; display:flex; align-items:center; justify-content:center; border-radius:100px; background:linear-gradient(135deg,#E8762D,#FF8C00); color:#fff; font-size:13px; font-weight:800; text-transform:uppercase; }
.account-meta { display:flex; flex-direction:column; line-height:1.25; min-width:0; }
.account-email { font-size:12px; font-weight:600; color:#e5e7eb; max-width:230px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.account-sub { font-size:10px; color:#6b7280; }
@media (max-width:640px){ .account-email { max-width:140px; } }
.current-plan { display:flex; align-items:center; gap:10px; }
.plan-badge { padding:4px 12px; border-radius:100px; font-size:11px; font-weight:700; text-transform:uppercase; }
.plan-expiry { font-size:11px; color:#6b7280; }
.badge-free { background:rgba(107,114,128,.1); color:#9ca3af; border:1px solid rgba(107,114,128,.15); }
.badge-monthly { background:rgba(59,130,246,.08); color:#60a5fa; border:1px solid rgba(59,130,246,.15); }
.badge-quarterly { background:rgba(139,92,246,.08); color:#a78bfa; border:1px solid rgba(139,92,246,.15); }
.badge-yearly { background:rgba(249,115,22,.08); color:#fb923c; border:1px solid rgba(249,115,22,.15); }
.badge-lifetime { background:rgba(16,185,129,.08); color:#34d399; border:1px solid rgba(16,185,129,.15); }

/* ── Hero ── */
.hero { text-align:center; padding:20px 0 36px; }
.hero-title { font-size:32px; font-weight:900; letter-spacing:-.5px; margin-bottom:10px; }
.gradient-text { background:linear-gradient(135deg,#f97316,#ef4444,#a855f7); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; }
.hero-sub { font-size:15px; color:#6b7280; max-width:480px; margin:0 auto; }

/* ── Plans Grid ── */
.plans-section { margin-bottom:48px; }
.plans-grid { display:grid; grid-template-columns:repeat(5,1fr); gap:14px; }
.plan-card { background:#111118; border:1px solid rgba(255,255,255,.06); border-radius:16px; padding:24px 18px; display:flex; flex-direction:column; transition:all .3s; position:relative; }
.plan-card:hover { border-color:rgba(255,255,255,.12); transform:translateY(-4px); }
.plan-card-popular { border-color:rgba(139,92,246,.3); background:linear-gradient(180deg,rgba(139,92,246,.06) 0%,#111118 40%); }
.plan-card-lifetime { border-color:rgba(16,185,129,.2); background:linear-gradient(180deg,rgba(16,185,129,.04) 0%,#111118 40%); }
.popular-tag { position:absolute; top:-10px; left:50%; transform:translateX(-50%); padding:4px 14px; border-radius:100px; background:linear-gradient(135deg,#7c3aed,#a855f7); color:#fff; font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:.5px; white-space:nowrap; }
.plan-header { text-align:center; margin-bottom:18px; padding-bottom:16px; border-bottom:1px solid rgba(255,255,255,.06); }
.plan-label { font-size:11px; font-weight:700; color:#6b7280; text-transform:uppercase; letter-spacing:.5px; }
.plan-price { margin:8px 0 4px; }
.price-amount { font-size:32px; font-weight:900; letter-spacing:-.5px; }
.price-period { font-size:14px; color:#6b7280; font-weight:500; }
.plan-period { font-size:11px; color:#4b5563; }
.plan-features { list-style:none; flex:1; margin-bottom:18px; }
.plan-features li { position:relative; padding:6px 0 6px 20px; font-size:12px; color:#9ca3af; }
.plan-features li::before { content:'✓'; position:absolute; left:0; color:#10b981; font-weight:700; font-size:11px; }
.plan-features li strong { color:#e6edf3; }
.plan-btn { width:100%; padding:10px; border-radius:10px; border:none; font-size:12px; font-weight:700; font-family:inherit; cursor:pointer; transition:all .2s; }
.plan-btn-current { background:rgba(107,114,128,.1); color:#6b7280; cursor:default; }
.plan-btn-buy { background:rgba(255,255,255,.05); color:#e6edf3; border:1px solid rgba(255,255,255,.1); }
.plan-btn-buy:hover { background:rgba(255,255,255,.1); border-color:rgba(255,255,255,.2); transform:translateY(-1px); }
.plan-btn-popular { background:linear-gradient(135deg,#7c3aed,#a855f7); color:#fff; }
.plan-btn-popular:hover { box-shadow:0 4px 16px rgba(124,58,237,.4); transform:translateY(-1px); }
.plan-btn-lifetime { background:linear-gradient(135deg,#059669,#10b981); color:#fff; }
.plan-btn-lifetime:hover { box-shadow:0 4px 16px rgba(16,185,129,.4); transform:translateY(-1px); }
.plan-btn:disabled { opacity:.5; cursor:not-allowed; transform:none !important; }

/* ── FAQ ── */
.faq-section { margin-bottom:48px; }
.section-title { font-size:20px; font-weight:800; margin-bottom:18px; text-align:center; }
.faq-list { max-width:640px; margin:0 auto; }
.faq-item { background:#111118; border:1px solid rgba(255,255,255,.06); border-radius:12px; margin-bottom:8px; overflow:hidden; }
.faq-item summary { padding:14px 18px; font-size:13px; font-weight:600; color:#e6edf3; cursor:pointer; list-style:none; }
.faq-item summary::-webkit-details-marker { display:none; }
.faq-item summary::after { content:'+'; float:right; font-size:16px; color:#6b7280; transition:transform .2s; }
.faq-item[open] summary::after { content:'−'; }
.faq-item p { padding:0 18px 14px; font-size:12px; color:#9ca3af; line-height:1.6; }

/* ── Footer ── */
.pricing-footer { text-align:center; padding:28px 0 40px; border-top:1px solid rgba(255,255,255,.06); }
.footer-links { display:flex; justify-content:center; gap:20px; margin-bottom:10px; }
.footer-links a { font-size:11px; color:#6b7280; text-decoration:none; transition:color .2s; }
.footer-links a:hover { color:#e6edf3; }
.footer-copy { font-size:10px; color:#374151; }

/* ── Modals ── */
.modal-overlay { position:fixed; inset:0; z-index:9999; background:rgba(0,0,0,.75); backdrop-filter:blur(8px); display:flex; align-items:center; justify-content:center; padding:20px; }
.modal-card { background:#111118; border:1px solid rgba(255,255,255,.08); border-radius:16px; padding:28px; max-width:380px; width:100%; text-align:center; }
.modal-card h3 { font-size:18px; font-weight:800; margin-bottom:10px; }
.modal-card p { font-size:13px; color:#9ca3af; margin-bottom:20px; line-height:1.5; }
.modal-actions { display:flex; gap:8px; }
.modal-cancel { flex:1; padding:10px; border-radius:10px; border:1px solid rgba(255,255,255,.08); background:rgba(255,255,255,.03); color:#9ca3af; font-size:13px; font-weight:600; cursor:pointer; font-family:inherit; }
.modal-confirm { flex:1; padding:10px; border-radius:10px; border:none; background:linear-gradient(135deg,#dc2626,#b91c1c); color:#fff; font-size:13px; font-weight:700; cursor:pointer; font-family:inherit; }
.modal-ok { width:100%; padding:12px; border-radius:10px; border:none; background:linear-gradient(135deg,#f97316,#ef4444); color:#fff; font-size:14px; font-weight:700; cursor:pointer; font-family:inherit; transition:all .2s; }
.modal-ok:hover { transform:translateY(-1px); box-shadow:0 4px 16px rgba(249,115,22,.3); }
.success-icon { font-size:48px; margin-bottom:10px; }
.modal-success h3 { color:#10b981; }

/* ── Responsive ── */
@media (max-width:900px) {
  .plans-grid { grid-template-columns:repeat(2,1fr); }
  .plan-card-popular { order:-1; grid-column:span 2; }
}
@media (max-width:480px) {
  .plans-grid { grid-template-columns:1fr; }
  .plan-card-popular { grid-column:span 1; }
  .hero-title { font-size:24px; }
}