/* assets/upgrade.css — modern look without touching your base style.css */

/* Layout helpers */
.container{max-width:1100px;margin-left:auto;margin-right:auto;padding:0 16px}
.u-bg{background: radial-gradient(1200px 600px at 10% 0%, #1a1f3a 0%, #0e1224 40%, #0a0d1a 100%), #0a0d1a; color:#eef1ff}
.card{background: rgba(255,255,255,0.04); border:1px solid rgba(255,255,255,0.08); border-radius:18px; padding:22px; box-shadow: 0 10px 30px rgba(0,0,0,0.25);}

/* Header */
.site-header{position:sticky; top:0; backdrop-filter: blur(8px); background: rgba(10,13,26,0.6); border-bottom:1px solid rgba(255,255,255,0.06); z-index:10}
.header-inner{display:flex; align-items:center; justify-content:space-between; height:64px}
.brand{display:flex; align-items:center; gap:10px; font-weight:700}
.logo{font-size:24px}
.brand-title{font-size:18px; letter-spacing:0.3px}
.nav{display:flex; gap:14px}
.nav-link{color:#c8ccff; text-decoration:none}
.nav-link:hover{color:#ffffff}

/* Hero */
.hero-card{display:grid; grid-template-columns:1.2fr 0.8fr; gap:28px; margin:28px auto}
@media (max-width: 900px){ .hero-card{grid-template-columns:1fr} }
.hero-title{font-size: clamp(28px, 3.4vw, 42px); line-height:1.1; margin:0 0 10px}
.hero-sub{color:#c8ccff; margin:0 0 14px}
.hero-form{display:flex; flex-direction:column; gap:10px}
.input-wrap{position:relative; display:flex}
.input.big{font-size:18px; padding:14px 16px 14px 42px; border-radius:14px; border:1px solid rgba(255,255,255,0.12); background: rgba(255,255,255,0.06); color:#fff; width:100%}
.input.big::placeholder{color:#b7bbff}
.at{position:absolute; left:12px; top:50%; transform:translateY(-50%); opacity:.7}
.cta-row{display:flex; gap:10px; flex-wrap:wrap; margin-top:4px}
.btn{cursor:pointer; border-radius:12px; padding:10px 14px; border:1px solid transparent; text-decoration:none; display:inline-flex; align-items:center; justify-content:center; gap:8px}
.btn-lg{padding:14px 18px; font-weight:600}
.btn-primary{background: linear-gradient(135deg, #6e7bff, #8a5cff); color:#0b0f1f; border-color: rgba(255,255,255,0.15)}
.btn-primary:hover{filter:brightness(1.08)}
.btn-ghost{background: transparent; color:#e6e9ff; border-color: rgba(255,255,255,0.18)}
.btn-ghost:hover{background: rgba(255,255,255,0.06)}
.trust{margin-top:10px}
.trust-row{display:flex; gap:10px; flex-wrap:wrap}
.trust-badge{font-size:12px; padding:6px 10px; border-radius:999px; background: rgba(255,255,255,0.08); border:1px solid rgba(255,255,255,0.14); color:#dfe2ff}

/* Right visual */
.hero-visual{display:flex; align-items:center; justify-content:center}
.apps-grid{display:grid; grid-template-columns:repeat(4, 72px); gap:12px}
.app-tile{height:72px; width:72px; display:grid; place-items:center; border-radius:16px; background: rgba(255,255,255,0.06); border:1px solid rgba(255,255,255,0.12); color:#cfd3ff; font-weight:700; letter-spacing:1px}

/* Benefits */
.benefits{display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin:22px auto}
@media (max-width: 900px){ .benefits{grid-template-columns:1fr} }
.benefit{background: rgba(255,255,255,0.04); border:1px solid rgba(255,255,255,0.08); border-radius:16px; padding:16px}
.benefit-num{font-size:12px; letter-spacing:1px; color:#aab0ff; opacity:.8}

/* Results */
.results-card{margin:24px auto}
.results-wrap{display:grid; gap:10px}
.results .result-row{display:flex; align-items:center; justify-content:space-between; background: rgba(255,255,255,0.04); border:1px solid rgba(255,255,255,0.10); border-radius:12px; padding:10px}
.result-name{font-weight:600}

/* Bottom CTA */
.cta-bottom{margin:24px auto}
.cta-bottom-inner{display:flex; align-items:center; justify-content:space-between; gap:14px; flex-wrap:wrap}
.cta-inline{display:flex; gap:10px}

/* Footer */
.site-footer{border-top:1px solid rgba(255,255,255,0.06); margin-top:26px}
.footer-inner{height:72px; display:flex; align-items:center; justify-content:center}

/* A11y helpers */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.link{color:#b2b8ff}
.link:hover{color:#fff}
.muted{color:#c8ccff}
.small{font-size:12px}
.tiny{font-size:11px; opacity:.9}
.h3{font-size:20px}