/* JobFlow — Futuristic Experience V2. Scoped to landing page. */
:root{--jf-night:#070b1b;--jf-panel:#111b36;--jf-violet:#7b3cff;--jf-blue:#2d8cff;--jf-text:#f5f7ff;--jf-muted:#a7b3d3}
html{scroll-padding-top:90px}body:has(.hero){background:#070b1b;color:var(--jf-text);overflow-x:hidden}
body:has(.hero) .container{width:min(1280px,calc(100% - 64px))}
body:has(.hero) .navbar{background:rgba(7,11,27,.72)!important;border-bottom:1px solid rgba(131,145,240,.12)!important;backdrop-filter:blur(22px) saturate(145%);-webkit-backdrop-filter:blur(22px) saturate(145%)}
body:has(.hero) .navbar .brand,body:has(.hero) .navbar .nav-links a{color:#f3f5ff}
body:has(.hero) .navbar .nav-links a{opacity:.77;transition:opacity .25s,color .25s}body:has(.hero) .navbar .nav-links a:hover{opacity:1;color:#b2a2ff}
body:has(.hero) .brand-icon,body:has(.hero) .mini-logo{background:linear-gradient(135deg,#a35bff,#5537ef 50%,#258aff);box-shadow:0 5px 24px #7548ff50}
body:has(.hero) .btn-primary,body:has(.hero) .pricing-button-primary{background:linear-gradient(110deg,#913bff,#663eff 45%,#278dff)!important;color:#fff!important;border:1px solid #a889ff45!important;box-shadow:0 8px 30px #6b45ff38;position:relative;isolation:isolate;overflow:hidden;transition:transform .3s,box-shadow .3s,filter .3s}
body:has(.hero) .btn-primary::after,body:has(.hero) .pricing-button-primary::after{content:"";position:absolute;inset:-60% auto -60% -50%;width:38%;background:linear-gradient(90deg,transparent,#ffffff50,transparent);transform:rotate(24deg) translateX(-180%);transition:transform .75s;pointer-events:none}
body:has(.hero) .btn-primary:hover::after,body:has(.hero) .pricing-button-primary:hover::after{transform:rotate(24deg) translateX(650%)}
body:has(.hero) .btn-primary:hover,body:has(.hero) .pricing-button-primary:hover{transform:translateY(-3px);box-shadow:0 16px 46px #6d48ff69}
body:has(.hero) .btn-secondary,body:has(.hero) .btn-ghost{background:#11192b8c;color:#f5f7ff;border:1px solid #8997cf50;transition:background .25s,border-color .25s,transform .25s}
body:has(.hero) .btn-secondary:hover,body:has(.hero) .btn-ghost:hover{background:#1b2545;border-color:#9181ff;transform:translateY(-2px)}
body:has(.hero) .hero{position:relative;isolation:isolate;min-height:710px;display:flex;align-items:center;padding:118px 0 130px!important;background:radial-gradient(ellipse 55% 65% at 87% 34%,#42258d59,transparent 72%),radial-gradient(ellipse 50% 55% at 0% 85%,#103b9a4d,transparent 80%),linear-gradient(135deg,#070b1b,#0b1230 68%,#090e25);overflow:hidden}
body:has(.hero) .hero::before{content:"";position:absolute;inset:0;z-index:-1;background-image:linear-gradient(#7489ed0a 1px,transparent 1px),linear-gradient(90deg,#7489ed0a 1px,transparent 1px);background-size:58px 58px;mask-image:linear-gradient(to bottom,transparent,#000 35%,#000 65%,transparent);animation:jf-grid-drift 26s linear infinite}
body:has(.hero) .hero::after{content:"";position:absolute;pointer-events:none;width:850px;height:850px;border-radius:50%;right:-400px;top:-270px;border:1px solid #a78aff27;box-shadow:0 0 0 85px #7855ff09,0 0 0 185px #7855ff07,0 0 0 295px #7855ff05;animation:jf-orbit 28s linear infinite}
body:has(.hero) .hero-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(35px,5vw,85px);align-items:center;position:relative;z-index:1}
body:has(.hero) .hero-content{position:relative;z-index:3}
body:has(.hero) .hero .eyebrow{display:inline-flex;align-items:center;gap:10px;padding:9px 16px;border-radius:100px;border:1px solid #8a74ff5c;background:#7553ff13;color:#d3c7ff;font-weight:650;box-shadow:0 0 32px #7848ff15}
body:has(.hero) .hero .status-dot{background:#a98cff;box-shadow:0 0 0 5px #a98cff25,0 0 16px #a98cff;animation:jf-pulse 2.8s ease-in-out infinite}
body:has(.hero) .hero h1{color:#fff!important;font-size:clamp(48px,5.1vw,78px)!important;line-height:1.055!important;letter-spacing:-.065em!important;font-weight:820!important;margin:28px 0 27px!important;max-width:720px}
body:has(.hero) .hero h1 span{background:linear-gradient(105deg,#a56cff 4%,#765aff 45%,#33b3ff 95%);-webkit-background-clip:text;background-clip:text;color:transparent!important;filter:drop-shadow(0 8px 25px #4c55ff20)}
body:has(.hero) .hero-description{color:#bac5df!important;font-size:clamp(16px,1.2vw,19px)!important;line-height:1.75!important;max-width:570px}
body:has(.hero) .hero-actions{display:flex;gap:14px;flex-wrap:wrap;margin-top:32px}
body:has(.hero) .hero-note{color:#aab7d6!important;display:flex;gap:18px;flex-wrap:wrap;margin-top:25px}body:has(.hero) .hero-note span{color:#7be7b4}
body:has(.hero) .dashboard-preview{position:relative;z-index:2;background:linear-gradient(155deg,#182445ed,#0e1631f5)!important;border:1px solid #8c87ff53!important;border-radius:24px!important;box-shadow:0 38px 100px #020414b8,0 0 80px #664cff26,inset 0 1px #ffffff1b!important;padding:24px!important;transform:perspective(1100px) rotateY(-6deg) rotateX(3deg) translateY(0);transform-style:preserve-3d;animation:jf-float 7s ease-in-out infinite;transition:transform .35s ease,box-shadow .35s ease;will-change:transform}
body:has(.hero) .dashboard-preview:hover{box-shadow:0 45px 110px #020414c9,0 0 110px #664cff43}
body:has(.hero) .dashboard-preview::before{content:"";position:absolute;inset:-2px;border-radius:26px;background:linear-gradient(125deg,#a48dff6b,transparent 35%,transparent 70%,#2f98ff6b);z-index:-1;filter:blur(9px);opacity:.7;pointer-events:none}
body:has(.hero) .dashboard-preview .dashboard-top{border-bottom:1px solid #ffffff14;padding-bottom:15px;margin-bottom:16px}
body:has(.hero) .dashboard-preview .dashboard-title strong,body:has(.hero) .dashboard-preview .agent-search strong,body:has(.hero) .dashboard-preview .job-info strong,body:has(.hero) .dashboard-preview .dashboard-section-title{color:#f8faff}
body:has(.hero) .dashboard-preview .dashboard-title span,body:has(.hero) .dashboard-preview .agent-search span,body:has(.hero) .dashboard-preview .stat span,body:has(.hero) .dashboard-preview .stat small,body:has(.hero) .dashboard-preview .job-info>span{color:#a6b6db}
body:has(.hero) .dashboard-preview .agent-search,body:has(.hero) .dashboard-preview .stat,body:has(.hero) .dashboard-preview .job-card{background:#111c38!important;border:1px solid #8395d21f!important;border-radius:12px!important}
body:has(.hero) .dashboard-preview .stat strong{color:#fff}
body:has(.hero) .dashboard-preview .job-card{transition:transform .25s,border-color .25s,background .25s}body:has(.hero) .dashboard-preview .job-card:hover{transform:translateX(5px);border-color:#806dff88!important;background:#1a2849!important}
body:has(.hero) .dashboard-preview .job-tags span{background:#3b4d8a45;color:#a8bcff}
body:has(.hero) .section{position:relative;padding:110px 0!important;background:#0b1127!important;color:#f7f8ff!important;overflow:hidden}
body:has(.hero) .section:nth-of-type(even){background:#0d1530!important}
body:has(.hero) .section-heading>span{color:#9b82ff!important;letter-spacing:.17em;font-weight:800}
body:has(.hero) .section-heading h2{color:#f7f8ff!important;font-size:clamp(34px,3.2vw,51px)!important;line-height:1.15!important;letter-spacing:-.045em}
body:has(.hero) .section-heading p{color:#aab8d5!important;font-size:16px;line-height:1.7}
body:has(.hero) .steps{gap:20px}
body:has(.hero) .step,body:has(.hero) .feature-card,body:has(.hero) .pricing-card{background:linear-gradient(145deg,#17223e,#10182f)!important;color:#f7f8ff!important;border:1px solid #6b78c73b!important;border-radius:20px!important;box-shadow:inset 0 1px #ffffff0a,0 18px 55px #02051530;position:relative;overflow:hidden;transition:transform .35s cubic-bezier(.2,.7,.2,1),border-color .35s,box-shadow .35s}
body:has(.hero) .step::before,body:has(.hero) .feature-card::before,body:has(.hero) .pricing-card::before{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(340px circle at var(--mx,50%) var(--my,0%),#8764ff20,transparent 65%);opacity:0;transition:opacity .3s}
body:has(.hero) .step:hover::before,body:has(.hero) .feature-card:hover::before,body:has(.hero) .pricing-card:hover::before{opacity:1}
body:has(.hero) .step:hover,body:has(.hero) .feature-card:hover,body:has(.hero) .pricing-card:hover{transform:translateY(-7px);border-color:#8b79ff99!important;box-shadow:0 24px 65px #0006,0 0 36px #654dff19}
body:has(.hero) .step{padding:28px!important;min-height:230px}
body:has(.hero) .step-number{color:#8293c9!important}
body:has(.hero) .step-icon,body:has(.hero) .feature-icon{background:linear-gradient(135deg,#583bbd70,#3266bf4d)!important;color:#d4c5ff!important;border:1px solid #9479ff3d;border-radius:12px;box-shadow:0 0 25px #6a4fff18}
body:has(.hero) .step h3,body:has(.hero) .feature-card h3{color:#fff!important}
body:has(.hero) .step p,body:has(.hero) .feature-card p{color:#aab8d5!important}
body:has(.hero) .fake-job-list>div,body:has(.hero) .mail-preview{background:#1c2845!important;border:1px solid #8c9ce022!important;border-radius:11px;color:#e8eeff!important}
body:has(.hero) .fake-job-list small,body:has(.hero) .mail-preview span,body:has(.hero) .mail-preview p{color:#a8b7d6!important}
body:has(.hero) .pipeline strong{color:#fff!important}body:has(.hero) .pipeline span{color:#a8b7d6!important}
body:has(.hero) .pricing-section{background:radial-gradient(ellipse at 50% 10%,#38206e38,transparent 60%),#0b1127!important}
body:has(.hero) .pricing-card{padding:32px!important}
body:has(.hero) .pricing-card-pro{background:linear-gradient(165deg,#282046,#141c3a)!important;border-color:#966aff!important;box-shadow:0 0 0 1px #966aff50,0 25px 90px #6b37ff24!important;transform:translateY(-8px)}
body:has(.hero) .pricing-card-pro:hover{transform:translateY(-14px)}
body:has(.hero) .pricing-name,body:has(.hero) .pricing-price strong{color:#fff!important}
body:has(.hero) .pricing-card p,body:has(.hero) .pricing-price span,body:has(.hero) .pricing-includes,body:has(.hero) .pricing-features li,body:has(.hero) .pricing-bottom{color:#b4c0dc!important}
body:has(.hero) .pricing-divider{background:#8190c02c!important}
body:has(.hero) .pricing-popular{background:linear-gradient(90deg,#994dff,#477eff)!important;color:#fff!important;box-shadow:0 8px 28px #6d4fff55}
body:has(.hero) .pricing-button-secondary,body:has(.hero) .pricing-button-disabled{background:#263252!important;border:1px solid #6b79b448!important;color:#e8eeff!important}
body:has(.hero) .cta-section{background:#090f24!important;padding:95px 0!important}
body:has(.hero) .cta-box{position:relative;overflow:hidden;background:linear-gradient(105deg,#6029e6,#7440ff 52%,#258eff)!important;border:1px solid #b69aff55!important;border-radius:26px!important;box-shadow:0 30px 85px #5833ff35;padding:56px!important}
body:has(.hero) .cta-box::after{content:"";position:absolute;width:430px;height:430px;border:1px solid #ffffff3b;border-radius:50%;right:-130px;top:-240px;box-shadow:0 0 0 60px #ffffff0b,0 0 0 130px #ffffff09;animation:jf-orbit 20s linear infinite;pointer-events:none}
body:has(.hero) .cta-box h2,body:has(.hero) .cta-box p{color:#fff!important}
body:has(.hero) footer{background:#070b1b!important;color:#9eaccb!important;border-top:1px solid #8b98d32a!important}
body:has(.hero) footer .brand{color:#fff}
body:has(.hero) .jf-reveal{opacity:0;transform:translateY(34px);transition:opacity .75s ease,transform .75s cubic-bezier(.2,.7,.2,1)}
body:has(.hero) .jf-reveal.jf-visible{opacity:1;transform:translateY(0)}
body:has(.hero) .jf-spotlight{position:absolute;inset:0;pointer-events:none;z-index:0;background:radial-gradient(600px circle at var(--cursor-x,50%) var(--cursor-y,40%),#6046fa20,transparent 70%)}
body:has(.hero) .jf-scroll-progress{position:fixed;top:0;left:0;height:3px;width:0;background:linear-gradient(90deg,#a45dff,#2b9aff);box-shadow:0 0 14px #9161ff;z-index:999;pointer-events:none}
@keyframes jf-grid-drift{to{background-position:58px 58px}}@keyframes jf-float{0%,100%{transform:perspective(1100px) rotateY(-6deg) rotateX(3deg) translateY(0)}50%{transform:perspective(1100px) rotateY(-4deg) rotateX(2deg) translateY(-16px)}}@keyframes jf-orbit{to{transform:rotate(360deg)}}@keyframes jf-pulse{50%{box-shadow:0 0 0 8px #a98cff14,0 0 24px #a98cff}}
@media(max-width:1000px){body:has(.hero) .hero{min-height:auto;padding:110px 0!important}body:has(.hero) .hero-grid{gap:28px}body:has(.hero) .hero h1{font-size:clamp(43px,5vw,60px)!important}body:has(.hero) .dashboard-preview{transform:none;animation:none}}
@media(max-width:760px){body:has(.hero) .container{width:min(100% - 32px,560px)}body:has(.hero) .navbar .nav-links{background:#101933!important}body:has(.hero) .hero{padding:75px 0 85px!important}body:has(.hero) .hero-grid{grid-template-columns:1fr;gap:42px}body:has(.hero) .hero h1{font-size:clamp(42px,11vw,60px)!important}body:has(.hero) .dashboard-preview{padding:16px!important}body:has(.hero) .section{padding:78px 0!important}body:has(.hero) .step{min-height:auto}body:has(.hero) .pricing-card-pro{transform:none}body:has(.hero) .pricing-card-pro:hover{transform:translateY(-5px)}body:has(.hero) .cta-box{padding:32px 24px!important}body:has(.hero) .hero-actions .btn{width:100%;justify-content:center}}
@media(prefers-reduced-motion:reduce){body:has(.hero) *,body:has(.hero) *::before,body:has(.hero) *::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}body:has(.hero) .jf-reveal{opacity:1;transform:none}}