/* JobFlow / Landing redesign V1 — scoped to landing stylesheet */
:root{--jf-night:#080e20;--jf-panel:#111a32;--jf-line:rgba(160,177,255,.17);--jf-violet:#803dff;--jf-blue:#318aff;--jf-ink:#f7f9ff;--jf-muted:#a6b3d1}
body{background:var(--jf-night);color:var(--jf-ink);overflow-x:hidden}
body .container{width:min(1220px,calc(100% - 48px))}
.navbar{background:rgba(8,14,32,.83);border-bottom:1px solid var(--jf-line);backdrop-filter:blur(22px)}
.nav-inner{min-height:78px}
.brand{color:white;letter-spacing:-.04em}
.brand-icon,.mini-logo{background:linear-gradient(140deg,var(--jf-violet),var(--jf-blue));box-shadow:0 6px 22px rgba(91,75,255,.28)}
.nav-links a{color:#b9c5df;transition:color .2s}
.nav-links a:hover{color:white}
.btn,.pricing-button{border-radius:11px;transition:transform .2s,box-shadow .2s,background .2s}
.btn:hover,.pricing-button:not(:disabled):hover{transform:translateY(-2px)}
.btn-primary,.pricing-button-primary{color:white;background:linear-gradient(105deg,#8538ff,#287dff);border:1px solid rgba(255,255,255,.12);box-shadow:0 12px 30px rgba(83,73,255,.25)}
.btn-primary:hover,.pricing-button-primary:hover{box-shadow:0 16px 42px rgba(83,73,255,.4)}
.btn-ghost,.btn-secondary{color:#eef2ff;background:rgba(255,255,255,.035);border:1px solid rgba(177,192,255,.25)}
.hero{position:relative;isolation:isolate;overflow:hidden;background:radial-gradient(ellipse at 78% 33%,rgba(93,58,222,.27),transparent 38%),radial-gradient(ellipse at 17% 88%,rgba(24,91,202,.12),transparent 43%),#080e20;border-bottom:1px solid var(--jf-line)}
.hero::before{content:"";position:absolute;z-index:-1;inset:0;background-image:linear-gradient(rgba(149,162,231,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(149,162,231,.035) 1px,transparent 1px);background-size:64px 64px;mask-image:linear-gradient(to bottom,transparent,black 28%,transparent 94%);pointer-events:none}
.hero-grid{min-height:670px;align-items:center;gap:68px;padding-top:90px;padding-bottom:110px}
.hero-content{position:relative;z-index:1}
.eyebrow{display:inline-flex;align-items:center;gap:10px;padding:10px 15px;color:#d7d6ff;background:rgba(113,74,236,.12);border:1px solid rgba(147,116,255,.27);border-radius:100px;font-size:12px;font-weight:650}
.status-dot{background:#7a67ff;box-shadow:0 0 0 5px rgba(122,103,255,.13),0 0 15px rgba(122,103,255,.55)}
.hero h1{color:white;font-size:clamp(48px,5.3vw,78px);line-height:1.055;letter-spacing:-.065em;max-width:680px;margin:26px 0}
.hero h1 span{display:block;color:#8873ff;background:linear-gradient(100deg,#a15bff 0%,#655aff 47%,#38a9ff 100%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.hero-description{color:#b1bfd9;font-size:clamp(16px,1.4vw,18px);line-height:1.8;max-width:570px}
.hero-actions{gap:14px;margin-top:34px}
.hero-note{color:#91a2c2;gap:16px;margin-top:27px}
.hero-note span{color:#59d9b4}
.dashboard-preview{position:relative;background:linear-gradient(160deg,rgba(28,39,75,.95),rgba(12,20,43,.98));border:1px solid rgba(152,160,255,.3);border-radius:26px;box-shadow:0 45px 100px rgba(0,0,0,.42),0 0 80px rgba(85,63,221,.13);padding:25px;transform:perspective(1200px) rotateY(-5deg) rotateX(2deg);transition:transform .45s,box-shadow .45s}
.dashboard-preview:hover{transform:perspective(1200px) rotateY(0) rotateX(0);box-shadow:0 45px 100px rgba(0,0,0,.46),0 0 90px rgba(85,63,221,.24)}
.dashboard-top{border-bottom:1px solid var(--jf-line);padding-bottom:17px}
.dashboard-title strong,.dashboard-section-title,.job-info strong{color:#f5f7ff}
.dashboard-title span{color:#6fe5bd}
.avatar{background:#222d4c;color:#cfd8ff}
.agent-search,.stat,.job-card{background:rgba(255,255,255,.035);border:1px solid rgba(159,175,241,.12);border-radius:12px}
.agent-search span,.stat span,.job-info>span,.job-tags,.stat small{color:#9aabca}
.agent-search strong,.stat strong{color:#fff}
.agent-pill{color:#c8c0ff;background:rgba(118,89,255,.19)}
.company-logo{background:linear-gradient(135deg,#473bd3,#338cf8);color:white}
.job-tags span{background:rgba(92,107,183,.16);color:#b4c4f9}
.match{color:#78d9c0;background:rgba(32,190,145,.13)}
.section{background:#0c1328;color:#f5f7ff;padding-top:105px;padding-bottom:105px}
.section-heading>span{color:#9b8cff;letter-spacing:.15em}
.section-heading h2{color:white;letter-spacing:-.055em;font-size:clamp(34px,3.5vw,53px)}
.section-heading p{color:#a6b4d0}
.steps{gap:18px}
.step{background:linear-gradient(150deg,#151f3a,#10182e);border:1px solid var(--jf-line);border-radius:20px;padding:29px;transition:transform .25s,border-color .25s,box-shadow .25s}
.step:hover,.feature-card:hover{transform:translateY(-5px);border-color:rgba(140,110,255,.5);box-shadow:0 18px 55px rgba(0,0,0,.18)}
.step-number{color:#667aa4}
.step-icon,.feature-icon{color:#c5baff;background:linear-gradient(135deg,rgba(127,66,255,.2),rgba(52,130,255,.12));border:1px solid rgba(139,123,255,.2);border-radius:12px}
.step h3,.feature-card h3{color:#fff}
.step p,.feature-card p{color:#a8b5d1}
.section-dark{background:radial-gradient(ellipse at 90% 20%,rgba(91,50,203,.12),transparent 38%),#080e20}
.feature-grid{gap:18px}
.feature-card{background:linear-gradient(145deg,#141d36,#10182c);border:1px solid var(--jf-line);border-radius:21px;transition:transform .25s,border-color .25s,box-shadow .25s}
.fake-job-list>div,.pipeline,.mail-preview{background:rgba(255,255,255,.045);border:1px solid rgba(151,168,235,.11);border-radius:12px}
.fake-job-list strong{color:#a5a1ff}
.fake-job-list span,.pipeline span,.mail-preview span{color:#c2cde5}
.fake-job-list small{color:#899bbd}
.pipeline strong{color:#fff}
.mail-preview{color:#e8edff}
.pricing-section{background:linear-gradient(180deg,#0c1328,#10182d)}
.pricing-grid{gap:22px}
.pricing-card{position:relative;background:linear-gradient(160deg,#17203b,#11192e);color:#f4f7ff;border:1px solid var(--jf-line);border-radius:22px;box-shadow:0 18px 52px rgba(0,0,0,.13);transition:transform .25s,border-color .25s}
.pricing-card:hover{transform:translateY(-5px);border-color:rgba(140,110,255,.45)}
.pricing-card-pro{border:1px solid #8661ff;background:linear-gradient(160deg,#25204a,#151d3b);box-shadow:0 22px 60px rgba(81,54,215,.18)}
.pricing-name,.pricing-price strong{color:#fff}
.pricing-card p,.pricing-price span,.pricing-includes{color:#aab8d4}
.pricing-divider{background:var(--jf-line)}
.pricing-features li{color:#c6d1e7}
.pricing-features .check{color:#60ddb1}
.pricing-popular{background:linear-gradient(100deg,#823dff,#3d83ff);color:#fff}
.pricing-soon{color:#a6b3cf;background:#26304c}
.pricing-button-secondary{background:rgba(255,255,255,.055);border:1px solid rgba(170,185,255,.2);color:white}
.pricing-button-disabled{background:#26304b;color:#8291b2}
.pricing-bottom{color:#9aabc9}
.cta-section{background:#0b1225;padding-top:90px;padding-bottom:90px}
.cta-box{position:relative;overflow:hidden;background:linear-gradient(110deg,#5933e3,#813cf0 55%,#367fff);border:1px solid rgba(255,255,255,.15);border-radius:24px;box-shadow:0 25px 80px rgba(86,57,215,.25)}
.cta-box::after{content:"";position:absolute;width:320px;height:320px;right:-120px;top:-200px;border:1px solid rgba(255,255,255,.25);border-radius:50%;pointer-events:none}
.cta-box h2,.cta-box p{color:white}
.btn-white{color:#3420a0;background:white}
footer{background:#080e20;color:#91a2c1;border-top:1px solid var(--jf-line)}
.footer-links a{color:#9baac7}
.footer-links a:hover{color:#fff}
:where(a,button):focus-visible{outline:3px solid #9b87ff;outline-offset:4px}
@media(max-width:1000px){.hero-grid{gap:32px}.hero h1{font-size:clamp(44px,5.2vw,65px)}.dashboard-preview{transform:none}}
@media(max-width:760px){body .container{width:min(100% - 32px,1220px)}.nav-inner{height:auto;min-height:70px;flex-wrap:wrap}.mobile-menu{margin-left:auto;color:#fff;background:rgba(255,255,255,.07);border:1px solid var(--jf-line);border-radius:10px;padding:9px 12px}.menu-open .nav-links{display:flex;order:3;width:100%;flex-direction:column;gap:14px;padding:16px 0;border-top:1px solid var(--jf-line)}.menu-open .nav-actions{display:flex;order:4;width:100%;padding-bottom:16px}.menu-open .nav-actions .btn{flex:1}.hero-grid{min-height:auto;padding-top:70px;padding-bottom:75px;gap:50px}.hero h1{font-size:clamp(40px,10vw,57px)}.hero-actions{display:flex;flex-wrap:wrap}.hero-actions .btn{max-width:100%}.dashboard-preview{padding:16px;border-radius:18px}.section{padding-top:76px;padding-bottom:76px}.step,.feature-card{padding:22px}.cta-section{padding-top:65px;padding-bottom:65px}.cta-box{padding:28px}.pricing-grid{gap:22px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}
