*{margin:0;padding:0;box-sizing:border-box}
body{background:#070a18;color:#eef0ff;font-family:'Segoe UI',system-ui,sans-serif;min-height:100vh;overflow-x:hidden}
.topbar{display:flex;align-items:center;justify-content:space-between;padding:16px 32px;border-bottom:1px solid #1b2140;flex-wrap:wrap;gap:12px}
.brand{display:flex;align-items:center;gap:12px;text-decoration:none;color:#eef0ff}
.brand-logo{width:40px;height:40px;border-radius:10px;object-fit:cover}
.brand span{font-weight:700;letter-spacing:1px;line-height:1.1}
.brand b{color:#8b7bff}
.brand small{display:block;font-size:.6rem;letter-spacing:4px;color:#9aa3c7}
.topbar nav a{color:#c3c9e8;text-decoration:none;margin-left:20px;font-size:.9rem}
.topbar nav a:hover{color:#fff}
.hero{text-align:center;padding:70px 20px 40px;background:radial-gradient(ellipse at 50% 120%,#1b1140 0%,#0a0d1f 55%,#070a18 100%)}
.eyebrow{font-size:.7rem;letter-spacing:3px;color:#8b7bff;margin-bottom:16px}
.hero h1{font-size:2.6rem;line-height:1.15;margin-bottom:18px}
.hero .sub{color:#9aa3c7;max-width:620px;margin:0 auto;line-height:1.7}
.hero strong{color:#8b7bff}
.section{max-width:1100px;margin:50px auto;padding:0 20px}
.section h2{display:flex;align-items:center;gap:10px;font-size:1.3rem;margin-bottom:24px}
.dot{width:10px;height:10px;border-radius:50%;background:linear-gradient(135deg,#22d3ee,#8b5cf6);display:inline-block}
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:18px}
.plan{background:#0f1430;border:1px solid #1e2550;border-radius:16px;padding:26px;text-align:center;transition:border-color .2s,transform .2s}
.plan:hover{border-color:#8b5cf6;transform:translateY(-3px)}
.plan.popular{border-color:#8b5cf6;position:relative}
.plan.popular::before{content:"POPULAIRE";position:absolute;top:-10px;left:50%;transform:translateX(-50%);background:linear-gradient(135deg,#22d3ee,#8b5cf6);font-size:.6rem;letter-spacing:2px;padding:3px 12px;border-radius:12px;font-weight:700}
.plan h3{font-size:1.1rem;margin-bottom:8px}
.plan .price{font-size:2.2rem;font-weight:800;background:linear-gradient(135deg,#22d3ee,#8b5cf6);-webkit-background-clip:text;background-clip:text;color:transparent}
.plan .credits{color:#9aa3c7;font-size:.85rem;margin:8px 0 4px}
.plan .feat{color:#c3c9e8;font-size:.8rem;line-height:1.6;margin:12px 0 18px;min-height:60px}
.plan button{width:100%;padding:12px;border:none;border-radius:10px;background:linear-gradient(135deg,#22d3ee,#8b5cf6);color:#fff;font-weight:700;cursor:pointer;font-size:.9rem}
.plan button:hover{opacity:.9}
.plan button:disabled{opacity:.5;cursor:not-allowed}
.how{max-width:900px;margin:60px auto;padding:0 20px 80px;text-align:center}
.how h2{margin-bottom:30px}
.steps{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:18px}
.step{background:#0f1430;border:1px solid #1e2550;border-radius:16px;padding:24px}
.step b{display:inline-flex;width:36px;height:36px;border-radius:50%;background:linear-gradient(135deg,#22d3ee,#8b5cf6);align-items:center;justify-content:center;margin-bottom:12px}
.step h3{font-size:.95rem;margin-bottom:8px}
.step p{color:#9aa3c7;font-size:.8rem;line-height:1.6}
.honest{margin-top:28px;background:#141b36;border:1px solid #2a2f55;border-radius:12px;padding:16px;font-size:.82rem;color:#c3c9e8;line-height:1.6}
#status{position:fixed;bottom:20px;left:50%;transform:translateX(-50%);padding:12px 22px;border-radius:10px;background:#141b36;border:1px solid #8b5cf6;display:none;z-index:50;max-width:90vw}
#status.ok{display:block;border-color:#22c55e}
#status.err{display:block;border-color:#ef4444}
@media(max-width:640px){.hero h1{font-size:1.8rem}.topbar{padding:14px 16px}.topbar nav a{margin-left:12px}}