:root{
  --bg-1: #07020f;
  --bg-2: #0f0820;
  --glass: rgba(255,255,255,0.06);
  --glass-border: rgba(255,255,255,0.08);
  --accent: #7ee7ff;
  --muted: rgba(255,255,255,0.7);
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;font-family:Inter,Segoe UI,Arial,Helvetica,sans-serif;color:#fff;background:radial-gradient(ellipse at 20% 10%, rgba(124,58,237,0.12), transparent 10%), radial-gradient(ellipse at 90% 70%, rgba(14,165,233,0.06), transparent 10%), linear-gradient(180deg,var(--bg-1),var(--bg-2));
  background-attachment:fixed; -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
}
.hero{min-height:100vh;display:flex;align-items:center;justify-content:center;position:relative;padding:48px 24px}
.overlay{position:absolute;inset:0;background-image:radial-gradient(rgba(255,255,255,0.03) 1px, transparent 1px);background-size:20px 20px;opacity:0.6;mix-blend-mode:overlay;z-index:2}
.container{position:relative;z-index:3;max-width:1100px;width:100%}

/* Fullscreen animated background canvas */
#bg-canvas{position:absolute;inset:0;width:100%;height:100%;display:block;z-index:1}
.brand{display:flex;align-items:center;justify-content:space-between;margin-bottom:24px}
.logo{font-weight:700;letter-spacing:1px;font-size:20px}
.logo .accent{color:var(--accent);margin-left:6px}
.dev-icons{display:flex;gap:12px}
.dev-icons .icon{font-size:24px;opacity:0.8;animation:float 3s ease-in-out infinite;cursor:pointer;transition:transform 0.2s}
.dev-icons .icon:hover{transform:scale(1.2);opacity:1}
.dev-icons .icon:nth-child(1){animation-delay:0s}
.dev-icons .icon:nth-child(2){animation-delay:0.3s}
.dev-icons .icon:nth-child(3){animation-delay:0.6s}
@keyframes float{0%,100%{transform:translateY(0)} 50%{transform:translateY(-8px)}}
.card{display:grid;grid-template-columns:1fr 420px;gap:28px;align-items:center;background:linear-gradient(135deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));border:1px solid var(--glass-border);backdrop-filter: blur(10px);-webkit-backdrop-filter: blur(10px);padding:36px;border-radius:16px;box-shadow:0 6px 30px rgba(2,6,23,0.6)}
.left h1{margin:0 0 12px;font-size:32px}
.lead{color:var(--muted);margin:0 0 18px;max-width:48ch}
.soon{font-weight:600;color:var(--accent);margin-bottom:12px}
.signup{display:flex;gap:12px}
.signup input{flex:1;padding:12px 14px;border-radius:10px;border:1px solid rgba(255,255,255,0.06);background:transparent;color:#fff}
.signup button{padding:12px 16px;border-radius:10px;border:none;background:linear-gradient(90deg, #5eead4, #7dd3fc);color:#021124;font-weight:700;cursor:pointer}
.signup-status{margin-top:8px;font-size:13px;min-height:18px}

/* User count component */
.user-count{margin-top:14px;display:flex;align-items:center;gap:8px;color:rgba(255,255,255,0.8);font-size:12px;background:linear-gradient(135deg, rgba(255,255,255,0.03), rgba(255,255,255,0.01));border:1px solid rgba(255,255,255,0.06);padding:8px 10px;border-radius:10px;width:max-content}
.user-count .label{font-weight:700;color:#e5faff}
.user-count .value{font-weight:800;color:var(--accent)}
.user-count .note{color:rgba(255,255,255,0.55)}
.right .visual{display:flex;align-items:center;justify-content:center;padding:20px;background:linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));border-radius:12px;min-height:380px;position:relative}

/* 3D Resume Mockup */
.resume-mockup{position:relative;width:100%;max-width:240px;perspective:1000px}
.resume-page{background:#fff;padding:18px 16px;border-radius:4px;box-shadow:0 20px 60px rgba(0,0,0,0.4), 0 8px 20px rgba(0,0,0,0.3);transform:rotateY(-5deg) rotateX(2deg);transition:transform 0.3s ease;position:relative;z-index:2}
.resume-mockup:hover .resume-page{transform:rotateY(-2deg) rotateX(1deg) translateY(-4px)}
.resume-header{border-bottom:2px solid #2d3748;padding-bottom:8px;margin-bottom:12px}
.resume-name{font-size:14px;font-weight:800;color:#1a202c;letter-spacing:0.5px}
.resume-title{font-size:10px;color:#4a5568;margin-top:2px;font-weight:600}
.resume-section{margin-bottom:12px}
.section-title{font-size:9px;font-weight:700;color:#2d3748;margin-bottom:6px;letter-spacing:0.8px}
.resume-line{height:4px;background:linear-gradient(90deg, #cbd5e0 0%, #e2e8f0 100%);margin-bottom:4px;border-radius:2px}
.resume-line.short{width:70%}
.skill-pills{display:flex;gap:4px;flex-wrap:wrap}
.skill-pills .pill{font-size:8px;padding:3px 6px;background:linear-gradient(135deg, #667eea, #764ba2);color:#fff;border-radius:8px;font-weight:600}
.ats-badge{position:absolute;bottom:8px;right:8px;font-size:8px;padding:4px 8px;background:linear-gradient(135deg, #5eead4, #7dd3fc);color:#021124;border-radius:12px;font-weight:700;box-shadow:0 2px 8px rgba(94,234,212,0.5)}
.resume-shadow{position:absolute;bottom:-10px;left:10%;right:10%;height:20px;background:radial-gradient(ellipse, rgba(0,0,0,0.3), transparent);filter:blur(8px);z-index:1}
/* Text lines inside mockup */
.resume-text{margin:2px 0;font-size:8px;line-height:1.25;color:#2d3748;font-weight:500;letter-spacing:.2px}
.resume-text:first-of-type{margin-top:4px}
.footer{margin-top:18px;color:rgba(255,255,255,0.85);font-size:13px;display:flex;align-items:center;justify-content:space-between;gap:12px}
.footer .links a{color:var(--accent);text-decoration:none;font-weight:600}
.footer .links a:hover{text-decoration:underline}
.footer .links .sep{margin:0 8px;color:rgba(255,255,255,0.45)}

/* Progress bar section */
.progress-section{margin:24px 0;padding:18px;background:linear-gradient(135deg, rgba(255,255,255,0.03), rgba(255,255,255,0.01));border:1px solid rgba(255,255,255,0.06);border-radius:12px;backdrop-filter:blur(8px)}
.progress-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px}
.progress-label{font-size:14px;color:rgba(255,255,255,0.85);font-weight:600}
.progress-percent{font-size:18px;color:var(--accent);font-weight:700}
.progress-bar{height:10px;background:rgba(255,255,255,0.08);border-radius:10px;overflow:hidden;position:relative}
.progress-fill{height:100%;background:linear-gradient(90deg, #5eead4, #7dd3fc, #a78bfa);border-radius:10px;transition:width 0.8s ease;box-shadow:0 0 16px rgba(94,234,212,0.5);animation:pulse 2s ease-in-out infinite}
.launch-info{margin-top:10px;font-size:13px;color:rgba(255,255,255,0.7)}
.launch-info strong{color:var(--accent);font-weight:600}

@keyframes pulse{0%,100%{opacity:1} 50%{opacity:0.8}}

@media (max-width:880px){
  .card{grid-template-columns:1fr;}
  .right{order:-1}
}